/* Crosshair Maker (CIT Tools). Builds on /CITtools/assets/ids/ids.css (top bar, page, cards, footer). */
.xh-modes,.xh-views,.xh-zoom{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.xh-modes{margin-top:18px}
.xh-modes button,.xh-views button,.xh-zoom button,.xh-btn{background:var(--raised);color:var(--text);border:1px solid var(--line);border-radius:9px;padding:8px 14px;font:inherit;font-size:14px;font-weight:700;cursor:pointer}
.xh-modes button{font-size:15px;padding:10px 18px}
.xh-modes button[aria-pressed="true"],.xh-views button[aria-pressed="true"],.xh-zoom button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#0d0f10}
.xh-btn.main{background:var(--accent);border-color:var(--accent);color:#0d0f10}
.xh-btn:hover,.xh-modes button:hover,.xh-views button:hover,.xh-zoom button:hover{border-color:var(--accent)}
.xh-app{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:18px;margin-top:14px;align-items:start}
.xh-left{min-width:0}
.xh-stage{position:relative;width:100%;aspect-ratio:16/9;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#111 center/cover no-repeat}
.xh-stage canvas{position:absolute;inset:0;width:100%;height:100%}
.xh-hud{position:absolute;top:4%;right:3%;display:flex;flex-direction:column;align-items:center;gap:2px;pointer-events:none}
.xh-hud img{width:clamp(34px,7vw,72px);height:auto;image-rendering:auto;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}
.xh-hud span{font-size:11px;color:#fff;text-shadow:0 1px 2px #000;background:rgba(0,0,0,.35);padding:0 6px;border-radius:5px}
.xh-under{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:8px;align-items:center}
.xh-under .small{font-size:13px;color:var(--dim)}
.xh-note{margin-top:10px;padding:9px 12px;border-left:3px solid var(--warn);background:var(--raised);border-radius:0 8px 8px 0;font-size:14px;color:var(--text)}
.xh-weapons{display:flex;gap:6px;overflow-x:auto;padding:4px 2px 8px;margin-top:10px;scrollbar-width:thin}
.xh-weapon{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:2px;width:74px;padding:6px 4px;border-radius:10px;border:1px solid var(--line);background:var(--panel);color:var(--muted);font:inherit;font-size:11px;cursor:pointer}
.xh-weapon img{width:40px;height:40px}
.xh-weapon span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:66px}
.xh-weapon[aria-pressed="true"]{border-color:var(--accent);color:var(--text);background:var(--accent-dark)}
.xh-panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px}
.xh-panel h2{margin:0 0 8px;font-size:16px}
.xh-panel + .xh-panel{margin-top:12px}
.xh-part{border:0;border-top:1px solid var(--line);margin:0;padding:10px 0 8px}
.xh-part:first-of-type{border-top:0}
.xh-part legend{padding:0;font-weight:700;font-size:14px;display:flex;align-items:center;gap:8px}
.xh-part legend label{display:flex;align-items:center;gap:8px;cursor:pointer}
.xh-part.off .xh-row{display:none}
.xh-row{display:grid;grid-template-columns:96px minmax(0,1fr) 34px;gap:8px;align-items:center;margin-top:6px;font-size:13px;color:var(--muted)}
.xh-row output{font-variant-numeric:tabular-nums;color:var(--text);text-align:right}
.xh-row input[type=range]{width:100%;accent-color:var(--accent)}
.xh-row select,.xh-row input[type=color]{background:#0b0d0e;color:var(--text);border:1px solid var(--line);border-radius:7px;padding:4px 6px;font:inherit;font-size:13px;min-width:0}
.xh-row input[type=color]{padding:0;height:30px;width:100%}
.xh-swatches{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.xh-swatch{width:26px;height:26px;border-radius:50%;border:2px solid var(--line);cursor:pointer;padding:0}
.xh-swatch:hover{border-color:var(--text)}
.xh-get{display:grid;gap:8px}
.xh-get .xh-btn{width:100%;text-align:left}
.xh-get label{font-size:13px;color:var(--muted);display:flex;gap:6px;align-items:center}
.xh-pics{display:flex;gap:12px;margin-top:10px;align-items:flex-end}
.xh-pics figure{margin:0;text-align:center;font-size:12px;color:var(--dim)}
.xh-pics img{display:block;background:repeating-conic-gradient(#2a2f33 0 25%,#1c2023 0 50%) 0 0/16px 16px;border:1px solid var(--line);border-radius:6px;image-rendering:pixelated}
.xh-pics .q img{width:64px;height:64px}.xh-pics .f img{width:128px;height:128px}
pre.xh-lua{white-space:pre-wrap;background:#0b0d0e;border:1px solid var(--line);border-radius:8px;padding:10px;font-size:12px;color:#f0dca8;margin-top:8px;max-height:260px;overflow:auto}
.xh-designs-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-top:22px}
.xh-designs-head h2{margin:0}
.xh-designs{list-style:none;padding:0;margin:10px 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px}
.xh-tile{width:100%;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px 6px;border-radius:10px;border:1px solid var(--line);background:#2a3a2c linear-gradient(180deg,#5d7f97,#7f8c6a);cursor:pointer;color:#fff;font:inherit;font-size:11px;line-height:1.25}
.xh-tile.scope{background:#47616f}
.xh-tile img{width:64px;height:64px}
.xh-tile span{text-shadow:0 1px 2px #000;min-height:2.5em;text-align:center}
.xh-tile:hover{border-color:var(--accent);outline:1px solid var(--accent)}
.xh-icons{list-style:none;padding:0;margin:12px 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px}
.xh-icons li{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:8px;text-align:center;font-size:12px;color:var(--muted)}
.xh-icons img{width:64px;height:64px;display:block;margin:0 auto 4px}
.xh-icons b{display:block;color:var(--text);font-size:13px}
.xh-icons a{font-size:12px}
.xh-steps{padding-left:20px;color:var(--text)}
.xh-steps li+li{margin-top:6px}
html:not(.xh-ready) .xh-needs-js{display:none}
@media (max-width:900px){.xh-app{grid-template-columns:1fr}}
@media (max-width:620px){.xh-row{grid-template-columns:84px minmax(0,1fr) 30px}.xh-designs{grid-template-columns:repeat(auto-fill,minmax(78px,1fr))}.xh-tile img{width:52px;height:52px}}
.xh-bgs{margin-top:8px}
.xh-bgs .small{margin-right:2px}
/* the preview stays on screen while the designs and settings scroll under it (owner, 14 Oct 2026) */
.xh-stage{position:sticky;top:8px;z-index:6;box-shadow:0 10px 24px rgba(0,0,0,.55)}
.xh-tile[aria-pressed="true"]{border-color:var(--accent);outline:2px solid var(--accent)}
@media (max-width:900px){.xh-left{display:contents}.xh-left>*{min-width:0;max-width:100%}.xh-stage{align-self:start;top:4px}}
@media (max-height:560px){.xh-stage{position:relative;top:auto}}
.xh-own{display:flex;gap:8px;align-items:center}.xh-own input[type=color]{flex:1;height:28px}