/* ARMORY page of the DASHBOARD (DESIGN, spec 11 §5), after Dota 2 2013 STORE › LOADOUT and the All Pick grid. Three
   columns fill the page: HEROES (portrait grid) | PREVIEW (the live model on a pedestal) | LOADOUT (slot boxes).
   Sizes are written at --dz 1 (a 1920×1080 canvas): the dashboard zooms its root by --dz, so nothing here zooms again.
   Type floor: labels 11px (Bungee), data 12-13px (JetBrains Mono), names 14-18px, the name plate Bungee Tint.
   Each column scrolls inside itself; nothing overflows the page or overlaps. Root: .armory-page (render/library.js). */
.armory-page { --cw: 92px; --gap: 8px; --crim: linear-gradient(180deg, #3a160a, #120604); width: 100%; height: 100%; min-height: 0;
  container: armory / inline-size; color: var(--hot); font-family: var(--label); }
.armory-page[hidden], .armory-page [hidden] { display: none !important; }
.armory-page .no-asset-tile { font-size: 11px; }
.armory-page .ap-cols { height: 100%; min-height: 0; display: grid; grid-template-columns: minmax(300px, 30%) minmax(360px, 1fr) minmax(260px, 24%);
  grid-template-rows: minmax(0, 1fr); gap: 14px; }
/* below the 1600×900 design canvas (tiny windows): shrink the floors instead of spilling off the page */
@container armory (max-width: 960px) { .armory-page .ap-cols { grid-template-columns: minmax(230px, 30%) minmax(280px, 1fr) minmax(220px, 26%); gap: 10px; } }

/* ---------- columns: charcoal bevelled panels with a gold hairline header ---------- */
.armory-page .ap-col { min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: auto; overscroll-behavior: contain;
  background: linear-gradient(180deg, var(--panel-hi), var(--panel-lo)); border: 1px solid var(--bevel);
  box-shadow: 0 0 0 1px #000, inset 0 1px 0 rgba(255,220,170,.07), 0 8px 24px rgba(0,0,0,.55); }
.armory-page .ap-col, .armory-page .ap-gridwrap, .armory-page .ap-clips { scrollbar-width: thin; scrollbar-color: var(--trim-dim) transparent; }
.armory-page .ap-head { flex: none; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; padding: 9px 12px 8px;
  background: linear-gradient(180deg, #2a1a13, #120a07); border-bottom: 1px solid var(--trim-dim); box-shadow: inset 0 1px 0 rgba(255,220,170,.08); }
.armory-page .ap-head b { font: 400 13px/1.1 var(--label); letter-spacing: .12em; color: var(--trim); text-shadow: 0 1px 0 #000; }
.armory-page .ap-head span { min-width: 0; font: 12px/1.3 var(--mono); opacity: .65; overflow-wrap: anywhere; }
.armory-page .ap-none { margin: 0; font: 12px/1.4 var(--mono); opacity: .6; }

/* ---------- HEROES: filter tabs, search, the All Pick grid ---------- */
.armory-page .ap-filters { flex: none; display: flex; flex-wrap: wrap; gap: 3px; padding: 10px 12px 0; }
.armory-page .ap-filters button { flex: 1 1 auto; padding: 8px 8px 7px; font: 400 11px/1 var(--label); letter-spacing: .1em; color: var(--hot); opacity: .7; cursor: pointer;
  background: #0a0605; border: 1px solid #2a1c14; }
.armory-page .ap-filters button:hover { opacity: 1; border-color: var(--trim-dim); }
.armory-page .ap-filters button.on { opacity: 1; color: #fff; background: var(--crim); border-color: var(--red); box-shadow: inset 0 -2px 0 var(--trim), inset 0 1px 0 rgba(255,160,120,.2); }
.armory-page .ap-search { flex: none; margin: 8px 12px 0; display: flex; align-items: center; gap: 8px; padding: 0 10px; color: var(--trim); cursor: text;
  background: #050202; border: 1px solid var(--bevel); box-shadow: inset 0 1px 4px #000; }
.armory-page .ap-search:focus-within { border-color: var(--trim-dim); box-shadow: inset 0 1px 4px #000, 0 0 0 1px var(--trim-dim); }
.armory-page .ap-search .ic { flex: none; }
.armory-page .ap-search input { flex: 1; min-width: 0; padding: 8px 0; background: none; border: 0; outline: 0; color: var(--hot); font: 13px/1.2 var(--mono); }
.armory-page .ap-search input::placeholder { color: var(--hot); opacity: .45; }
.armory-page .ap-gridwrap { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 12px; }
/* Kind blocks sit side by side when there is room (All Pick's columns) and wrap when not; a block with more than two
   cards (--g 1) takes the rest of its line, so the monsters reflow to fewer card columns on a smaller canvas. */
.armory-page .ap-blocks { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px 14px; }
.armory-page .ap-block { flex: var(--g, 0) 1 calc(min(var(--n), 2) * (var(--cw) + var(--gap)) - var(--gap)); min-width: var(--cw); max-width: 100%; }
.armory-page .ap-block h5 { margin: 0 0 8px; padding: 0 0 4px; display: flex; align-items: baseline; justify-content: space-between; gap: 6px;
  border-bottom: 1px solid var(--trim-dim); font: 400 11px/1.15 var(--label); letter-spacing: .1em; color: var(--trim); }
.armory-page .ap-block h5 i { font: normal 12px/1 var(--mono); letter-spacing: 0; color: var(--hot); opacity: .55; }
.armory-page .ap-cards { display: flex; flex-wrap: wrap; gap: 12px var(--gap); }
.armory-page .ap-card { width: var(--cw); display: flex; flex-direction: column; gap: 5px; padding: 0; background: none; border: 0; color: var(--hot); cursor: pointer; text-align: center; }
.armory-page .ap-face { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; transition: box-shadow .12s, filter .12s;
  background: radial-gradient(ellipse at 50% 32%, #33180f 0%, #120806 55%, #040202 100%); border: 1px solid #000;
  box-shadow: 0 0 0 1px #3a2a1c, inset 0 0 18px rgba(0,0,0,.85); }
.armory-page .ap-face img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.armory-page .ap-face::after { content: ''; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 1px 0 rgba(255,220,170,.1);
  background: linear-gradient(180deg, transparent 72%, rgba(0,0,0,.45)); }
/* full name under the portrait: wraps (2 lines for the long ones), never ellipsised */
.armory-page .ap-card b { font: 400 14px/1.1 var(--label); letter-spacing: .02em; overflow-wrap: break-word; color: var(--hot); opacity: .85; }
.armory-page .ap-card:hover .ap-face { box-shadow: 0 0 0 1px var(--trim), inset 0 0 18px rgba(0,0,0,.85); filter: brightness(1.15); }
.armory-page .ap-card:focus-visible { outline: 1px dashed var(--trim); outline-offset: 3px; }
.armory-page .ap-card.on .ap-face { box-shadow: 0 0 0 2px var(--trim), 0 0 16px rgba(200,164,90,.5), inset 0 0 18px rgba(0,0,0,.85); }
.armory-page .ap-card.on b { color: var(--trim); opacity: 1; }
/* worn: a small red corner ribbon, bottom-right over the feet, so it never covers the face */
.armory-page .ap-card em { position: absolute; right: 0; bottom: 0; z-index: 1; width: min-content; padding: 3px 5px 3px 9px; text-align: right;
  font: normal 400 11px/1.05 var(--label); letter-spacing: .04em; color: #fff; text-shadow: 0 1px 0 #000;
  background: linear-gradient(180deg, #e8331a, #7e1206); clip-path: polygon(7px 0, 100% 0, 100% 100%, 0 100%); }

/* ---------- PREVIEW: name plate, the stage, then mode / clips / the gold WEAR button / status ---------- */
.armory-page .ap-stagecol { padding-bottom: 12px; }
.armory-page .ap-plate { flex: none; padding: 14px 18px 10px; text-align: center; background: linear-gradient(180deg, #24150f, transparent); border-bottom: 1px solid var(--trim-dim); }
.armory-page .ap-plate h2 { margin: 0; font: 400 30px/1.05 var(--font); letter-spacing: .04em; color: var(--hot); overflow-wrap: break-word;
  text-shadow: 0 2px 0 #000, 0 0 18px rgba(255,42,18,.35); }
.armory-page .ap-plate p { margin: 6px 0 0; display: flex; justify-content: center; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; font: 13px/1.35 var(--mono); }
.armory-page .ap-plate p i { font: normal 400 11px/1 var(--label); letter-spacing: .12em; color: var(--trim); padding: 3px 6px; border: 1px solid var(--trim-dim); }
.armory-page .ap-plate p span { opacity: .8; }
.armory-page .ap-stage { position: relative; flex: 1 1 0; min-height: 280px; margin: 12px 14px 0; overflow: hidden; border: 1px solid #000;
  background: radial-gradient(rgba(255,42,18,.09) 1px, transparent 1.5px) 0 0 / 6px 6px,
              radial-gradient(ellipse 70% 62% at 50% 58%, #3a1a10 0%, #150906 48%, #030101 100%);
  box-shadow: 0 0 0 1px var(--trim-dim), inset 0 0 60px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,220,170,.08); }
.armory-page .ap-stage::before { content: ''; position: absolute; left: 18%; right: 18%; bottom: 6%; height: 12%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(255,90,42,.22), transparent 70%); }
.armory-page .ap-pvslot { position: absolute; inset: 0; z-index: 1; overflow: hidden; }
.armory-page .ap-pvslot > * { width: 100%; height: 100%; }
.armory-page .ap-pvslot canvas { display: block; }
.armory-page .ap-shot { display: block; object-fit: contain; padding: 4% 10%; }
.armory-page .ap-reset { position: absolute; top: 8px; right: 8px; z-index: 2; padding: 6px 9px; font: 400 11px/1 var(--label); letter-spacing: .1em; color: var(--hot); opacity: .75;
  background: rgba(10,6,5,.8); border: 1px solid var(--trim-dim); cursor: pointer; }
.armory-page .ap-reset:hover { opacity: 1; color: var(--trim); border-color: var(--trim); }
/* top-left, clear of the pedestal ring and of RESET VIEW (~110px wide with its padding) */
.armory-page .ap-hint { position: absolute; left: 10px; top: 10px; z-index: 2; max-width: calc(100% - 150px); margin: 0; font: 12px/1.3 var(--mono); opacity: .55; pointer-events: none; }
.armory-page .ap-msg { position: absolute; left: 50%; top: 50%; z-index: 2; max-width: 80%; margin: 0; padding: 8px 12px; transform: translate(-50%, -50%); pointer-events: none; text-align: center;
  font: 400 12px/1.35 var(--label); letter-spacing: .1em; background: rgba(0,0,0,.78); border: 1px solid var(--trim-dim); }
.armory-page .ap-msg.err { color: var(--warn); border-color: var(--warn); }
.armory-page .ap-under { flex: none; display: flex; flex-direction: column; gap: 10px; padding: 12px 14px 0; }
.armory-page .ap-modes { display: flex; flex-wrap: wrap; justify-content: center; }
.armory-page .ap-modes button { padding: 9px 14px 8px; font: 400 11px/1 var(--label); letter-spacing: .1em; color: var(--hot); opacity: .75; cursor: pointer;
  background: #0a0605; border: 1px solid #2a1c14; }
.armory-page .ap-modes button + button { margin-left: -1px; }
.armory-page .ap-modes button:hover { opacity: 1; }
.armory-page .ap-modes button.on { position: relative; z-index: 1; opacity: 1; color: #fff; background: var(--crim); border-color: var(--red);
  box-shadow: inset 0 1px 0 rgba(255,160,120,.25), 0 0 12px rgba(255,42,18,.25); }
.armory-page .ap-cliprow { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; }
.armory-page .ap-cliprow > span { display: flex; flex-direction: column; gap: 3px; font: 400 11px/1.1 var(--label); letter-spacing: .1em; color: var(--trim); }
.armory-page .ap-cliprow > span i { font: normal 12px/1 var(--mono); letter-spacing: 0; color: var(--hot); opacity: .55; }
/* two rows that scroll sideways: every clip name is shown whole, none is cut off */
.armory-page .ap-clips { display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, auto); grid-auto-columns: max-content; justify-content: start; gap: 4px;
  overflow-x: auto; overflow-y: hidden; padding-bottom: 6px; }
.armory-page .ap-clips button { padding: 5px 9px; font: 12px/1.2 var(--mono); white-space: nowrap; color: var(--hot); cursor: pointer; background: #0a0605; border: 1px solid #2a1c14; }
.armory-page .ap-clips button:hover { color: #fff; border-color: var(--trim-dim); }
.armory-page .ap-clips button.on { color: #fff; background: var(--crim); border-color: var(--red); }
.armory-page .ap-clips .ap-none { grid-row: span 2; }
.armory-page .ap-wear { align-self: center; width: min(100%, 440px); display: flex; align-items: center; justify-content: center; gap: 10px; padding: 13px 18px;
  font: 400 16px/1.1 var(--label); letter-spacing: .1em; color: #140c05; cursor: pointer; text-shadow: 0 1px 0 rgba(255,240,200,.5);
  background: linear-gradient(180deg, #f0d08a 0%, #c8a45a 48%, #8a6a30 100%); border: 1px solid #f2d898;
  box-shadow: 0 0 0 1px #000, inset 0 1px 0 rgba(255,255,255,.45), inset 0 -2px 0 rgba(0,0,0,.25), 0 6px 18px rgba(200,164,90,.22); }
.armory-page .ap-wear .ic { flex: none; }
.armory-page .ap-wear:hover:not(:disabled) { filter: brightness(1.1); box-shadow: 0 0 0 1px #000, inset 0 1px 0 rgba(255,255,255,.45), 0 0 22px rgba(255,210,120,.45); }
.armory-page .ap-wear:active:not(:disabled) { transform: translateY(1px); }
/* explicit opacity: dash.css dims every .dash-root button:disabled to .4, which on top of this filter left the gold
   plate near-invisible exactly when it matters (✓ WEARING) */
.armory-page .ap-wear:disabled { opacity: 1; cursor: default; filter: grayscale(.6) brightness(.55); box-shadow: 0 0 0 1px #000; }
.armory-page .ap-status { margin: 0; display: flex; flex-direction: column; gap: 3px; text-align: center; }
.armory-page .ap-status b { font: 400 12px/1.3 var(--label); letter-spacing: .1em; color: var(--hot); }
.armory-page .ap-status span { font: 12px/1.4 var(--mono); opacity: .7; }
.armory-page .ap-status[data-tone=ok] b { color: var(--ok, #8fe3ff); }
.armory-page .ap-status[data-tone=busy] b { color: var(--trim); }
.armory-page .ap-status[data-tone=warn] b { color: var(--warn); }

/* ---------- LOADOUT: slot boxes (COLOUR, SIZE, HISTORY), WEAR NO ASSET, ADVANCED ---------- */
.armory-page .ap-slots { display: flex; flex-direction: column; gap: 12px; padding: 12px; }
.armory-page .ap-slot { padding: 0 10px 10px; background: linear-gradient(180deg, #170f0c, #070404); border: 1px solid var(--bevel);
  box-shadow: 0 0 0 1px #000, inset 0 1px 0 rgba(255,220,170,.06); }
.armory-page .ap-slot h4 { margin: 0 -10px 10px; padding: 7px 10px 6px; display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 2px 8px;
  font: 400 11px/1.15 var(--label); letter-spacing: .12em; color: var(--trim); background: linear-gradient(180deg, rgba(200,164,90,.1), transparent);
  border-bottom: 1px solid var(--trim-dim); }
.armory-page .ap-slot h4 code, .armory-page .ap-slot h4 i { font: normal 12px/1.15 var(--mono); letter-spacing: 0; color: var(--hot); opacity: .7; }
.armory-page .ap-tints { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 5px; }
.armory-page .ap-tints button { aspect-ratio: 1; min-height: 20px; padding: 0; cursor: pointer; background: var(--t); border: 1px solid #000;
  box-shadow: 0 0 0 1px #3a2a1c, inset 0 1px 0 rgba(255,255,255,.25), inset 0 -3px 6px rgba(0,0,0,.35); }
.armory-page .ap-tints button:hover { box-shadow: 0 0 0 1px var(--trim), inset 0 1px 0 rgba(255,255,255,.25); }
.armory-page .ap-tints button.on { box-shadow: 0 0 0 2px #fff, 0 0 10px var(--t); }
.armory-page .ap-custom { margin-top: 9px; display: flex; align-items: center; gap: 8px; font: 400 11px/1 var(--label); letter-spacing: .1em; opacity: .85; cursor: pointer; }
.armory-page .ap-custom input { width: 44px; height: 26px; padding: 0; background: #000; border: 1px solid #3a2a1c; cursor: pointer; }
.armory-page .ap-custom.on { opacity: 1; color: #fff; }
.armory-page .ap-custom.on input { outline: 2px solid #fff; outline-offset: 1px; }
.armory-page .ap-size { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.armory-page .ap-size input { width: 100%; margin: 0; accent-color: var(--trim); cursor: pointer; }
.armory-page .ap-size b { min-width: 5ch; text-align: right; font: 600 13px/1 var(--mono); color: #fff; }
.armory-page .ap-hist { display: flex; flex-wrap: wrap; gap: 6px; }
.armory-page .ap-htile { position: relative; width: 52px; height: 52px; padding: 0; overflow: hidden; cursor: pointer;
  background: radial-gradient(ellipse at 50% 35%, #2a140e, #050202); border: 1px solid #000; box-shadow: 0 0 0 1px #3a2a1c; }
.armory-page .ap-htile img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.armory-page .ap-htile i { position: absolute; right: 3px; top: 3px; width: 10px; height: 10px; border: 1px solid #000; box-shadow: 0 0 0 1px rgba(255,255,255,.35); }
.armory-page .ap-htile em { position: absolute; left: 0; bottom: 0; padding: 2px 4px; font: normal 400 11px/1 var(--label); color: #fff; background: linear-gradient(180deg, #e8331a, #7e1206); }
.armory-page .ap-htile:hover { box-shadow: 0 0 0 1px var(--trim); }
.armory-page .ap-htile.now { box-shadow: 0 0 0 1px var(--red); }
.armory-page .ap-htile.on { box-shadow: 0 0 0 2px var(--trim), 0 0 10px rgba(200,164,90,.4); }
.armory-page .ap-htile:disabled { cursor: default; opacity: .5; }
.armory-page .ap-noasset { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px 12px; font: 400 12px/1.1 var(--label); letter-spacing: .1em;
  color: var(--hot); cursor: pointer; background: linear-gradient(180deg, #1d1310, #070404); border: 1px solid var(--bevel); box-shadow: 0 0 0 1px #000; }
.armory-page .ap-noasset:hover:not(:disabled) { color: var(--hazard); border-color: var(--hazard); }
.armory-page .ap-noasset:disabled { cursor: default; opacity: .6; }
.armory-page .ap-hz { flex: none; width: 22px; height: 22px; border: 1px solid #000; background: repeating-conic-gradient(var(--hazard) 0 25%, #000 0 50%) 0 0 / 11px 11px; }
.armory-page .ap-adv { background: #070404; border: 1px solid var(--bevel); box-shadow: 0 0 0 1px #000; }
.armory-page .ap-adv > summary { list-style: none; display: flex; align-items: center; gap: 8px; padding: 9px 10px; cursor: pointer;
  font: 400 11px/1 var(--label); letter-spacing: .12em; color: var(--trim); }
.armory-page .ap-adv > summary::-webkit-details-marker { display: none; }
.armory-page .ap-adv > summary::before { content: '▸'; font: 12px/1 var(--mono); transition: transform .12s; }
.armory-page .ap-adv[open] > summary { border-bottom: 1px solid var(--trim-dim); }
.armory-page .ap-adv[open] > summary::before { transform: rotate(90deg); }
.armory-page .ap-advbody { display: flex; flex-direction: column; gap: 12px; padding: 10px; }
/* label above value: the loadout column is narrow, so a file path gets the full width instead of a split mid-word */
.armory-page .ap-facts { margin: 0; display: grid; gap: 2px; }
.armory-page .ap-facts dt { font: 400 11px/1.3 var(--label); letter-spacing: .1em; color: var(--trim); }
.armory-page .ap-facts dt:not(:first-child) { margin-top: 6px; }
.armory-page .ap-facts dd { margin: 0; font: 12px/1.4 var(--mono); overflow-wrap: anywhere; }
.armory-page .ap-check { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 8px; cursor: pointer; }
.armory-page .ap-check input { width: 16px; height: 16px; margin: 1px 0 0; accent-color: var(--red); }
.armory-page .ap-check b { display: block; font: 400 11px/1.3 var(--label); letter-spacing: .1em; }
.armory-page .ap-check small { display: block; font: 12px/1.4 var(--mono); opacity: .65; }
.armory-page .ap-advacts { display: grid; gap: 5px; }
.armory-page .ap-advacts button { display: flex; align-items: center; gap: 8px; padding: 8px 10px; text-align: left; font: 400 11px/1.15 var(--label); letter-spacing: .1em;
  color: var(--hot); cursor: pointer; background: #120a07; border: 1px solid var(--trim-dim); }
.armory-page .ap-advacts button:hover { color: var(--trim); border-color: var(--trim); }
.armory-page .ap-advacts .ic { flex: none; color: var(--trim); }
.armory-page .ap-prompt { margin: 0; padding: 8px; font: 12px/1.45 var(--mono); opacity: .85; user-select: text; overflow-wrap: anywhere; background: #030101; border: 1px dashed var(--trim-dim); }
.armory-page .ap-libs h5 { margin: 0 0 6px; font: 400 11px/1.15 var(--label); letter-spacing: .12em; color: var(--trim); }
.armory-page .ap-libs a { display: grid; grid-template-columns: 14px minmax(0, 1fr); align-items: start; gap: 2px 8px; padding: 6px 0; color: var(--hot); text-decoration: none; border-top: 1px solid #1d130e; }
.armory-page .ap-libs a .ic { grid-row: span 2; margin-top: 1px; color: var(--trim); }
.armory-page .ap-libs a b { font: 400 12px/1.2 var(--label); letter-spacing: .06em; }
.armory-page .ap-libs a span { font: 12px/1.35 var(--mono); opacity: .65; }
.armory-page .ap-libs a:hover b { color: var(--trim); }
.armory-page .ap-libs p { margin: 8px 0 0; font: 12px/1.5 var(--mono); opacity: .7; }
.armory-page .ap-libs code { font-family: var(--mono); color: var(--trim); overflow-wrap: anywhere; }