/* The Loot Finder on the interactive map's shell (templates/wiki_loot_map.html, js/im-loot.js). Prefix `il-`; the
 * shell is interactive-map.css (`im-`, its tokens on .im-root). The loot colours are the old page's
 * (wiki-loot-finder.css of the old Leaflet page, retired 2026-10-21 (git history), LootCore): static loot green, dynamic events amber, inherited dark green, placements cyan. */

/* the panel's width and head are the map's (interactive-map.css `--im-panel-w`, owner 2026-10-19: one size in both) */
.im-shell--loot { --il-static: #7CFC5A; --il-event: #f0b429; --il-host: #3f7a34; --il-proxy: #38e0e0; }
.il-mono { font-family: var(--im-mono); }

/* Vanilla | DayZed: interactive-map.css `.im-econ` (the map's switch looks the same) */

/* ---------------------------------------------------------------- what is on the map */

.il-item { display: flex; align-items: center; gap: 10px; }
.il-item__pic { width: 44px; height: 44px; flex: none; object-fit: contain; border-radius: var(--im-r-md);
  background: radial-gradient(ellipse at 50% 40%, #2a3350 0%, #121729 80%); }
.il-item__pic--none { display: grid; place-items: center; color: var(--im-muted); font-size: 18px; }
.il-item__main { flex: 1; min-width: 0; }
.il-item__name { font-size: 15px; font-weight: 600; color: var(--im-text); overflow-wrap: anywhere; }
.il-item__class { font-size: 12px; color: var(--im-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.il-item__name .il-dot { width: 10px; height: 10px; border-radius: 50%; margin-right: 7px; vertical-align: 0; }
.il-pin[aria-pressed="true"] { color: var(--im-accent); background: var(--im-accent-soft); }
.il-pin:disabled { opacity: .35; cursor: not-allowed; }
.il-item__count { margin-top: 2px; font-size: 12.5px; color: var(--il-static); font-variant-numeric: tabular-nums; }
.il-item a.im-iconbtn { color: var(--im-text-2); text-decoration: none; }
/* The row's buttons (pin, wiki, x) as tall as the picture (owner 2026-10-18: "bigger, take more height of the box"),
 * closer to each other than to the text. */
.il-item .im-iconbtn { width: 42px; height: 44px; border-radius: var(--im-r-md); font-size: 17px;
  background: var(--im-field); box-shadow: inset 0 0 0 1px var(--im-line); color: var(--im-text-2); }
.il-item .im-iconbtn:hover { background: var(--im-hover); color: var(--im-text); }
.il-item .il-pin[aria-pressed="true"] { color: var(--im-accent); background: var(--im-accent-soft); box-shadow: inset 0 0 0 1px rgba(250,204,21,.45); }
.il-item .im-iconbtn svg { width: 19px; height: 19px; }
.il-item > .im-iconbtn + .im-iconbtn { margin-left: -6px; }
.il-label { font-size: 12.5px; color: var(--im-text-2); }
.il-presence { font-size: 12.5px; color: #d9a35b; }
.il-key { font-size: 12.5px; color: var(--im-text-2); display: block; }
.il-key__note { margin: 2px 0 0 18px; font-size: 11.5px; color: var(--im-muted); }
.il-dot { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin: 0 6px 0 0; vertical-align: -1px; }
.il-diamond { display: inline-block; width: 9px; height: 9px; transform: rotate(45deg); margin: 0 7px 0 1px; vertical-align: 0;
  box-shadow: 0 0 0 1px rgba(0,0,0,.6); }
.il-ring { display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 2px solid; margin: 0 6px 0 0; vertical-align: -1px; }
.il-evts { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.il-evt { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--im-text-2); }
.il-evt img { flex: none; }
.il-evt b { color: var(--im-text); font-weight: 600; font-variant-numeric: tabular-nums; }
.il-hosts { display: flex; flex-direction: column; gap: 3px; padding: 8px 10px; border-radius: var(--im-r-md); background: var(--im-field);
  border: 1px solid var(--im-line); }
.il-host__toggle { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--im-text); cursor: pointer; }
.il-host__toggle input { accent-color: var(--il-host); width: 15px; height: 15px; }
.il-host { display: flex; align-items: center; gap: 0; font-size: 12px; color: var(--im-text-2); padding-left: 2px; }
.il-host span:nth-child(2) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.il-host__p { font-family: var(--im-mono); font-size: 11.5px; color: var(--im-muted); }
.il-host__more { font-size: 11.5px; color: var(--im-muted); padding-left: 17px; }
.il-ramp { display: flex; height: 8px; border-radius: 4px; overflow: hidden; }
.il-ramp i { flex: 1; }
.il-caption { font-size: 11.5px; color: var(--im-muted); }

/* The area tool's card beside its button (im-loot.js areaHint places it; --il-ahint-y = its arrow's height). The old
 * page's invitation (wiki-loot-finder.css .lf-hint) in the map's surface; blue = the area box on the map. */
.il-ahint { position: absolute; z-index: 21; width: 236px; padding: 8px 10px 12px 12px; border-radius: 12px;
  background: #0a0e1c; border: 1px solid rgba(74,158,255,.5); box-shadow: var(--im-shadow-2);
  font-size: 13px; color: var(--im-text-2); }
.il-ahint[hidden] { display: none; }
.il-ahint::after { content: ""; position: absolute; right: -7px; top: var(--il-ahint-y, 26px); width: 12px; height: 12px; margin-top: -6px;
  background: #0a0e1c; border: solid rgba(74,158,255,.5); border-width: 1px 1px 0 0; transform: rotate(45deg); }
.il-ahint__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.il-ahint__head b { font-size: 14px; color: var(--im-text); }
.il-ahint__art { display: block; width: 100%; height: auto; border-radius: 8px; background: rgba(255,255,255,.03); }
.il-ahint__body { margin: 8px 0 10px; font-size: 12.5px; line-height: 1.45; color: var(--im-text-2); }
.il-ahint__go { width: 100%; background: rgba(74,158,255,.16); border-color: rgba(74,158,255,.55); color: #cfe3ff; }
.il-ahint__go:hover { background: rgba(74,158,255,.28); color: #fff; }
/* The drawing: dots in the loot green, the box in the area blue. BASE styles = the finished drag (box drawn, pointer at
 * its far corner, caught dots lit): with no motion (interactive-map.css switches animations off) that still is what
 * shows, and every loop starts and ends on it. The box is drawn (width / height grow), not scaled, so its dashes keep. */
.il-ahint__dots circle { fill: var(--il-static); opacity: .35; }
.il-ahint__lit circle { opacity: .9; animation: il-ahint-lit 4s ease-in-out infinite; }
.il-ahint__box { width: 38px; height: 27px; fill: rgba(74,158,255,.16); stroke: #4a9eff; stroke-width: 1.2; stroke-dasharray: 4 3;
  animation: il-ahint-drag 4s ease-in-out infinite; }
.il-ahint__cursor { transform: translate(38px, 27px); fill: #fff; stroke: rgba(0,0,0,.7); stroke-width: 1; stroke-linejoin: round;
  animation: il-ahint-point 4s ease-in-out infinite; }
@keyframes il-ahint-drag {
  0% { width: 0; height: 0; opacity: 0; } 8% { width: 0; height: 0; opacity: 1; }
  50%, 92% { width: 38px; height: 27px; opacity: 1; } 100% { width: 38px; height: 27px; opacity: 0; } }
@keyframes il-ahint-point {
  0% { transform: translate(0, 0); opacity: 0; } 8% { transform: translate(0, 0); opacity: 1; }
  50%, 92% { transform: translate(38px, 27px); opacity: 1; } 100% { transform: translate(38px, 27px); opacity: 0; } }
@keyframes il-ahint-lit { 0%, 12% { opacity: .35; } 50%, 100% { opacity: .9; } }

/* The Map key: folded like "How this is computed", the marks' meaning in the panel's colours */
.il-mapkey__body { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }

/* ---------------------------------------------------------------- My list (pinned items, im-loot.js renderList) */

.il-lis { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.il-li { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 2px 2px 2px 0; border-radius: 8px; }
.il-li.is-current { background: var(--im-accent-soft); }
.il-li.is-off .il-li__pic, .il-li.is-off .il-li__name, .il-li.is-off .il-li__n { opacity: .45; }
.il-li__sw { width: 28px; height: 28px; flex: none; display: grid; place-items: center; padding: 0; border: 0; border-radius: 7px;
  background: transparent; }
.il-li__sw:hover { background: var(--im-hover); }
.il-li__sw i { width: 14px; height: 14px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(0,0,0,.45); }
.il-li__sw[aria-pressed="false"] i { background: transparent !important; box-shadow: inset 0 0 0 2px var(--im-muted); }
.il-li__pic { width: 30px; height: 30px; flex: none; object-fit: contain; border-radius: 6px;
  background: radial-gradient(ellipse at 50% 40%, #2a3350 0%, #121729 80%); }
.il-li__pic--none { display: grid; place-items: center; color: var(--im-muted); font-size: 12px; }
.il-li__name { flex: 1; min-width: 0; padding: 0; border: 0; background: none; text-align: left; font-size: 13px; color: var(--im-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.il-li__name:hover { text-decoration: underline; }
.il-li__n { font-family: var(--im-mono); font-size: 12px; color: var(--im-text-2); white-space: nowrap; }

/* ---------------------------------------------------------------- the item list */

.il-rows { display: flex; flex-direction: column; padding: 2px 8px 8px; }
.il-row-wrap { position: relative; }
.il-row { display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 10px; width: 100%; min-height: 46px;
  padding: 5px 30px 5px 8px; border: 0; border-radius: 8px; background: transparent; text-align: left; }
.il-row:hover { background: var(--im-hover); }
.il-row[aria-selected="true"] { background: var(--im-accent-soft); box-shadow: inset 0 0 0 1px rgba(250,204,21,.45); }
.il-row--dead { opacity: .55; }
.il-row__pic { width: 32px; height: 32px; object-fit: contain; border-radius: 6px; background: #141a2c; }
.il-row__pic--none { display: grid; place-items: center; color: #3c4560; font-size: 13px; }
.il-row__main { min-width: 0; display: flex; flex-direction: column; }
.il-row__name { font-size: 13.5px; font-weight: 500; color: var(--im-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.il-row__class { font-family: var(--im-mono); font-size: 11px; color: var(--im-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.il-row__count { font-family: var(--im-mono); font-size: 12px; color: var(--im-text-2); font-variant-numeric: tabular-nums; }
.il-row-link { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; display: grid;
  place-items: center; border-radius: 6px; color: var(--im-muted); }
.il-row-link:hover { color: var(--im-text); background: var(--im-hover); }

/* the search dropdown's item rows: the item's picture in the badge */
.il-badge { width: 34px; height: 34px; border-radius: 8px; background: #141a2c; overflow: hidden; }
.il-badge__pic { width: 100%; height: 100%; object-fit: contain; }
.il-badge__pic--none { display: grid; place-items: center; color: #3c4560; font-size: 13px; }

/* ---------------------------------------------------------------- filters */

.il-fold { display: flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; color: inherit; }
.il-fold[aria-expanded="false"] .im-chev { transform: rotate(-90deg); }
.im-section--flush.il-shut { padding-bottom: 14px; }          /* folded item list: as tall as the folded filters */
.il-filters { display: flex; flex-direction: column; gap: 6px; }
.il-filters .il-label { margin-top: 4px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--im-muted); }
.il-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.il-chip { height: 26px; padding: 0 9px; border-radius: 999px; border: 1px solid var(--im-line-strong); background: var(--im-field);
  font-size: 12px; color: var(--im-text-2); }
.il-chip:hover { color: var(--im-text); border-color: var(--im-text-2); }
.il-chip[aria-pressed="true"] { background: var(--im-accent-soft); border-color: rgba(250,204,21,.6); color: var(--im-text); }
.il-select { height: 34px; padding: 0 8px; border-radius: var(--im-r-md); background: var(--im-field); border: 1px solid var(--im-line-strong);
  color: var(--im-text); font-size: 13px; }

/* ---------------------------------------------------------------- the area answer */

.il-area__sum { display: flex; flex-direction: column; gap: 2px; }
.il-area__sum b { font-size: 15px; color: var(--im-text); }
.il-area__sum span { font-size: 12px; color: var(--im-muted); }
.il-find { width: 100%; height: 34px; padding: 0 10px; border-radius: var(--im-r-md); background: var(--im-field);
  border: 1px solid var(--im-line-strong); color: var(--im-text); font-size: 13px; outline: none; }
.il-find:focus { border-color: var(--im-accent); }
.il-ag { margin-top: 4px; }
.il-ag__head { display: flex; align-items: center; gap: 8px; width: 100%; height: 34px; padding: 0 4px; border: 0; background: none;
  border-radius: 6px; font-size: 13px; font-weight: 600; color: var(--im-text); text-align: left; }
.il-ag__head:hover { background: var(--im-hover); }
.il-ag__head[aria-expanded="false"] .im-chev { transform: rotate(-90deg); }
.il-ag__head span { margin-left: auto; font-size: 11px; color: var(--im-muted); font-weight: 500; }
.il-ag__head em { font-style: normal; font-family: var(--im-mono); font-size: 12px; color: var(--im-accent); min-width: 44px; text-align: right; }
.il-arows { list-style: none; margin: 0; padding: 0 0 0 4px; }
.il-arow { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 32px; padding: 2px 4px; border: 0; background: none;
  border-radius: 6px; font-size: 12.5px; color: var(--im-text-2); text-align: left; }
.il-arow:hover { background: var(--im-hover); color: var(--im-text); }
.il-arow[aria-selected="true"] { background: var(--im-accent-soft); color: var(--im-text); }
.il-arow__pic { width: 24px; height: 24px; flex: none; object-fit: contain; border-radius: 4px; background: #141a2c; }
.il-arow__pic--none { display: grid; place-items: center; color: #3c4560; font-size: 10px; }
.il-arow__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.il-arow__var, .il-arow__host { font-style: normal; font-size: 11px; color: var(--im-muted); }
.il-arow em { font-style: normal; font-family: var(--im-mono); font-size: 12px; color: var(--im-text); min-width: 44px; text-align: right; }
.il-more { margin: 2px 0 0 8px; font-size: 12px; }
.il-area__foot { margin: 6px 0 0; font-size: 11px; line-height: 1.5; color: var(--im-muted); }

/* ---------------------------------------------------------------- the container card */

.il-card__sub { padding: 0 14px 6px; font-size: 12.5px; color: var(--im-text-2); }
.il-pool { display: inline-block; padding: 1px 6px; border-radius: 4px; font-size: 11px; background: rgba(124,252,90,.12); color: var(--il-static); }
.il-pool--event { background: rgba(240,180,41,.15); color: var(--il-event); }
.il-pool--host { background: rgba(63,122,52,.25); color: #8fae86; }
.il-hold__head { display: flex; padding: 6px 14px 4px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--im-muted); }
.il-hold__head span { margin-left: auto; font-weight: 500; letter-spacing: 0; text-transform: none; }
.il-hold { list-style: none; margin: 0 14px 10px; padding: 0; max-height: 168px; overflow-y: auto; border: 1px solid var(--im-line);
  border-radius: var(--im-r-md); scrollbar-width: thin; scrollbar-color: #2a3247 transparent; }
.il-hold button { display: flex; width: 100%; gap: 8px; padding: 5px 10px; border: 0; background: none; font-size: 12.5px;
  color: var(--im-text-2); text-align: left; }
.il-hold button:hover { background: var(--im-hover); color: var(--im-text); }
.il-hold button[aria-current="true"] { color: var(--im-accent); }
.il-hold span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.il-hold em { font-style: normal; font-family: var(--im-mono); color: var(--im-muted); }

/* Byte-for-byte the wiki item page's "Events only" badge (wiki-loot-finder.css) */
.im-shell--loot .lf-events-only { display: inline-block; padding: .05rem .3rem; border-radius: .25rem; font-size: .625rem; font-weight: 500;
  line-height: 1.4; vertical-align: 1px; background: rgba(120, 53, 15, .3); color: #fcd34d; border: 1px solid rgba(180, 83, 9, .5); }

/* ---------------------------------------------------------------- the server's text, in the panel */

.il-seo .lf-seo { background: none; border: 0; }
.il-seo .lf-seo__inner { padding: 14px 16px 6px; }
.il-seo .lf-seo__h1 { margin: 0 0 8px; font-size: 17px; line-height: 1.3; font-weight: 700; color: var(--im-text); }
.il-seo .lf-seo__h2 { margin: 16px 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--im-text-2); }
.il-seo .lf-seo__p { margin: 0 0 8px; font-size: 13px; line-height: 1.55; color: var(--im-text-2); }
.il-seo .lf-seo__p strong { color: var(--im-text); font-weight: 600; }
.il-seo .lf-seo__facts { display: grid; grid-template-columns: max-content 1fr; gap: 3px 14px; margin: 8px 0 0; font-size: 12.5px; }
.il-seo .lf-seo__facts dt { color: var(--im-muted); }
.il-seo .lf-seo__facts dd { margin: 0; color: var(--im-text); }
.il-seo .lf-seo__table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.il-seo .lf-seo__table th { text-align: left; color: var(--im-muted); font-weight: 500; padding: 3px 8px 3px 0; border-bottom: 1px solid var(--im-line); }
.il-seo .lf-seo__table td { color: var(--im-text); padding: 3px 8px 3px 0; border-bottom: 1px solid var(--im-line); }
.il-seo .lf-seo__list, .il-seo .lf-seo__links { margin: 4px 0 0; padding-left: 18px; font-size: 12.5px; color: var(--im-text-2); }
.il-seo .lf-seo__grid { list-style: none; margin: 4px 0 0; padding: 0; columns: 2; column-gap: 12px; font-size: 12.5px; }
.il-seo .lf-seo__grid li { break-inside: avoid; padding: 1px 0; }
.il-seo .lf-seo__links a, .il-seo .lf-seo__more a, .il-seo .lf-seo__grid a, .il-seo .lf-seo__p a { color: #34d399; text-decoration: none; }
.il-seo a:hover { text-decoration: underline; }
/* a place in the item's text: zooms the map to the item's points there (im-loot.js onPlaceLink) */
.il-seo a.lf-seo__goto { color: #34d399; text-decoration: underline dotted; text-underline-offset: 2px; }
.il-seo a.lf-seo__goto:hover { text-decoration: underline solid; }
.il-seo .lf-seo__more { margin: 12px 0 0; font-size: 13px; }
.il-seo .lf-seo__built { margin: 14px 0 0; font-size: 11px; line-height: 1.5; color: var(--im-muted); }
.il-seo .lf-seo__built code { color: var(--im-text-2); }

.il-caveats { border-top: 1px solid var(--im-line); padding: 10px 16px; font-size: 12px; color: var(--im-text-2); }
.il-caveats summary { cursor: pointer; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--im-text-2); }
.il-caveats ul { margin: 8px 0 0; padding-left: 16px; display: flex; flex-direction: column; gap: 6px; line-height: 1.5; }
.il-caveats .il-dot { width: 8px; height: 8px; }

/* Map layers: all five in one row (owner 2026-10-19), the map's four plus Heatmap */
.im-shell--loot .im-toggles { grid-template-columns: repeat(5, minmax(0, 1fr)); }

@media (max-width: 767px) {
  .il-row { min-height: 52px; }
  .il-chip { height: 32px; padding: 0 12px; font-size: 13px; }
  .il-select, .il-find { height: 42px; font-size: 16px; }
}