/* The item index (/items), on top of armory.css: a search form, a list and a detail panel. Item colours: --q-* (the game's). */
.items-page .itm-note { max-width: 70ch; color: var(--a-muted); margin: 10px 0 0; font-size: 0.92rem; }
.items-page .itm-app { padding-top: 18px; }
.itm-form { display: grid; gap: 10px; max-width: 980px; }
.itm-q input { width: 100%; box-sizing: border-box; font: inherit; font-size: 1.08rem; color: var(--a-text);
  background: rgba(10, 8, 6, 0.88); border: 2px solid var(--a-line); border-radius: 4px; padding: 10px 12px; }
.itm-q input:focus { border-color: var(--a-gold); outline: none; box-shadow: 0 0 0 3px rgba(217, 180, 91, 0.25); }
.itm-dev-opt { flex-direction: row !important; align-items: center; gap: 6px; flex-basis: 100%; color: var(--a-muted); }
.itm-count { margin: 12px 0 6px; color: var(--a-muted); min-height: 1.4em; }
.itm-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; }
.itm-open .itm-cols { grid-template-columns: minmax(0, 1fr); }
/* Wide screens: the detail sits beside the list, sticks below the site header and is as tall as the window, so it hardly scrolls
   (its content is two columns when it is wide enough). Phones and narrow windows: the detail is a full-screen sheet over the
   page, so opening an item never moves the list underneath and closing it comes back to the same place. */
@media (min-width: 900px) {
  .itm-open .itm-cols { grid-template-columns: minmax(0, 1fr) clamp(420px, 48vw, 800px); }
  .itm-open .itm-detail { position: sticky; top: 68px; max-height: calc(100vh - 78px); max-height: calc(100dvh - 78px); overflow-y: auto; }
}
@media (max-width: 899px) {
  .itm-open .itm-detail { position: fixed; inset: 0; z-index: 50; overflow-y: auto; overscroll-behavior: contain; border-radius: 0;
    border-width: 0; padding: 12px 14px 28px; box-shadow: none; }
}
@media (max-width: 760px) { .itm-open .itm-detail { padding-top: 10px; } }
.itm-detail { container-type: inline-size; scroll-margin-top: 72px; scroll-margin-bottom: 12px; }
.itm-dbody { display: block; }
@container (min-width: 520px) {
  .itm-dbody { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "main top" "bot top";
    gap: 0 20px; align-items: start; }
  .itm-dtop { grid-area: top; } .itm-dmain { grid-area: main; } .itm-dbot { grid-area: bot; }
  .itm-dbody .itm-3dbox { margin-top: 0; border-top: 0; }
  .itm-dbody .itm-same-box { margin-top: 10px; }
  .itm-dbody .itm-3d-stage .itm-3d { height: 240px; }
  .itm-dbody h3:first-child { margin-top: 4px; }
}
@media (min-width: 900px) and (max-height: 820px) { .itm-3d-stage .itm-3d { height: 200px; } }
.itm-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.itm-link { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 10px;
  background: var(--a-panel); border: 1px solid var(--a-line); border-radius: 4px; text-decoration: none; color: inherit; min-height: 48px; }
.itm-link:hover, .itm-link:focus-visible { background: var(--a-panel-2); border-color: var(--a-gold); }
.itm-icon { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; }
.itm-icon img { max-width: 40px; max-height: 44px; object-fit: contain; }
.itm-text { min-width: 0; display: flex; flex-direction: column; }
.itm-name { font-family: var(--a-serif); font-size: 1.02rem; overflow-wrap: anywhere; }
.itm-meta { color: var(--a-muted); font-size: 0.82rem; overflow-wrap: anywhere; }
.itm-tags { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; max-width: 14em; }
.itm-tag { font-size: 0.7rem; padding: 1px 6px; border: 1px solid var(--a-line); border-radius: 9px; color: var(--a-muted); white-space: nowrap; }
.itm-how-none, .itm-dev { color: #ffb3a8; border-color: #8a4a40; }
@media (max-width: 560px) { .itm-link { grid-template-columns: 40px minmax(0, 1fr); } .itm-tags { grid-column: 1 / -1; justify-content: flex-start; max-width: none; } }
.itm-detail { background: var(--a-panel); border: 2px solid var(--a-line); border-radius: 4px; padding: 14px 16px; box-shadow: 0 8px 26px rgba(0, 0, 0, 0.45); }
.itm-detail[hidden], .itm-more[hidden] { display: none; }
.itm-detail h2 { margin: 6px 0 2px; font-size: 1.5rem; }
.itm-detail h3 { margin: 14px 0 6px; font-size: 1rem; }
.itm-detail h2:focus { outline: none; }
.itm-back { font: inherit; font-size: 0.85rem; color: var(--a-gold-2); background: none; border: 1px solid var(--a-line); border-radius: 4px; padding: 4px 10px; cursor: pointer; }
.itm-back:hover, .itm-back:focus-visible { border-color: var(--a-gold); }
.itm-small { color: var(--a-dim); font-size: 0.74rem; margin: 0 0 8px; overflow-wrap: anywhere; }
.itm-big { float: right; max-height: 96px; margin: 0 0 6px 10px; }
.itm-devnote { border: 1px solid #8a4a40; background: rgba(138, 74, 64, 0.18); padding: 6px 10px; border-radius: 4px; font-size: 0.88rem; }
.itm-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 12px; margin: 8px 0; clear: none; }
.itm-dl dt { color: var(--a-muted); font-size: 0.88rem; } .itm-dl dd { margin: 0; }
.itm-lines { margin: 0; padding-left: 1.1em; }
.itm-table { border-collapse: collapse; width: 100%; font-size: 0.9rem; margin: 10px 0; }
.itm-table caption { text-align: left; color: var(--a-muted); font-size: 0.8rem; padding-bottom: 4px; }
.itm-table th, .itm-table td { border-bottom: 1px solid var(--a-line); padding: 3px 8px 3px 0; text-align: left; font-weight: normal; }
.itm-table thead th { color: var(--a-muted); font-size: 0.8rem; }
.itm-source { border-top: 1px solid var(--a-line); padding-top: 6px; }
.itm-source-head { margin: 4px 0; }
.itm-conf-low { color: #ffb3a8; } .itm-conf-high { color: #b6e3a0; } .itm-conf-medium { color: var(--a-gold-2); }
.itm-setb { margin: 8px 0 2px; color: var(--a-muted); font-size: 0.85rem; }
.itm-noicons .itm-link { grid-template-columns: minmax(0, 1fr) auto; }
.itm-noicons .itm-icon { display: none; }
@media (max-width: 560px) { .itm-noicons .itm-link { grid-template-columns: minmax(0, 1fr); } }
/* version switch, random tools, 3D view */
.itm-ver { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0; }
.itm-ver-l { color: var(--a-muted); font-size: 0.88rem; }
.itm-ver-b { font: inherit; font-size: 0.88rem; color: var(--a-text); background: none; border: 1px solid var(--a-line); border-radius: 4px; padding: 5px 12px; cursor: pointer; min-height: 36px; }
.itm-ver-b[aria-pressed="true"] { border-color: var(--a-gold); color: var(--a-gold-2); background: var(--a-panel-2); }
.itm-ver-b:hover, .itm-ver-b:focus-visible { border-color: var(--a-gold); }
.itm-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; flex-basis: 100%; }
.itm-tools [hidden] { display: none; }
.itm-tools-note { font-size: 0.82rem; }
.itm-3dbox { clear: both; border-top: 1px solid var(--a-line); margin-top: 10px; }
.itm-3d-ctl { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 8px; }
.itm-3d-ctl select { font: inherit; max-width: 100%; min-height: 40px; color: var(--a-text); background: rgba(10, 8, 6, 0.88); border: 1px solid var(--a-line); border-radius: 4px; padding: 4px 8px; }
.itm-3d-ctl select[hidden] { display: none; }
.itm-3d-stage .itm-3d { height: 280px; margin: 0; }
.itm-3d-stage .armory-model.av { margin: 0 auto; max-width: 100%; }
.itm-3d-status { margin: 4px 0; min-height: 1.2em; font-size: 0.88rem; }
@media (max-width: 560px) { .itm-3d-stage .itm-3d { height: 240px; } .itm-3d-ctl select { flex: 1 1 100%; } }
/* same-name items, curiosities */
.itm-same, .itm-curio-tag { color: var(--a-gold-2); border-color: #6b5230; }
.itm-group h2 { margin: 18px 0 4px; font-size: 1.15rem; color: var(--a-gold-2); font-family: var(--a-serif); }
.itm-group:first-child h2 { margin-top: 4px; }
.itm-curio-note { color: var(--a-muted); font-size: 0.8rem; margin-top: 2px; }
.itm-curio { border: 1px solid #6b5230; background: rgba(217, 180, 91, 0.08); padding: 6px 10px; border-radius: 4px; margin: 8px 0; font-size: 0.9rem; }
.itm-curio p { margin: 3px 0; }
.itm-same-box { margin-bottom: 8px; }
.itm-detail-page { max-width: 1100px; }
.itm-crumbs { font-size: 0.85rem; margin: 0 0 6px; color: var(--a-muted); }
.itm-crumbs a, .itm-own { color: var(--a-gold-2); }
a.itm-back { display: inline-block; text-decoration: none; }
.itm-ver-sec[hidden] { display: none; }
.itm-ver-sec > h2 { margin-top: 14px; }
.itm-3dslot:empty { display: none; }