/* Loot Finder — a two-column app layout: a scrolling control rail and a map that fills the viewport.
 *
 * Colour tokens (--color-primary, --border-subtle, ...) come from :root in base.html; the panel
 * surface colour matches .wiki-panel in wiki-browse.css so this reads as part of the same wiki.
 *
 * The map is the page, not a widget inside it, so the layout escapes the usual article column and
 * takes the full viewport height below the navbar. Under 1024px the rail becomes a bottom sheet and
 * the map keeps the viewport — on a phone, a map you can only see a third of is useless.
 */

.lf-shell {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 0;
    height: calc(100vh - 4rem);   /* navbar is h-16 / 4rem and sticky */
    min-height: 30rem;
}

.lf-rail {
    display: flex;
    flex-direction: column;
    min-height: 0;                /* lets the inner list scroll instead of the grid growing */
    border-right: 1px solid var(--border-subtle, rgba(255, 255, 255, .08));
    background: #12182a;
}

.lf-rail__head { padding: .875rem 1rem .5rem; border-bottom: 1px solid rgba(255,255,255,.06); }
.lf-rail__body { flex: 1 1 auto; overflow-y: auto; padding: .75rem 1rem 2rem; }

/* The wiki's scrollbar, taken from `.overflow-wrapper` in wiki-unified.css and `.wiki-rail` in
   wiki-prose.css rather than invented: 8px, a 20%-black track, a 50% cornflower thumb going to 70%
   under the pointer. Until now this file defined none, so the rail wore the platform's own -- white,
   against a #12182a panel. `.lf-pop__list` is the other scroller in this file and joins for free. */
.lf-rail__body::-webkit-scrollbar,
.lf-pop__list::-webkit-scrollbar { width: 8px; }
.lf-rail__body::-webkit-scrollbar-track,
.lf-pop__list::-webkit-scrollbar-track { background: rgba(0,0,0,.2); border-radius: 4px; }
.lf-rail__body::-webkit-scrollbar-thumb,
.lf-pop__list::-webkit-scrollbar-thumb { background: rgba(96,165,250,.5); border-radius: 4px; }
.lf-rail__body::-webkit-scrollbar-thumb:hover,
.lf-pop__list::-webkit-scrollbar-thumb:hover { background: rgba(96,165,250,.7); }

/* Firefox has no `::-webkit-scrollbar` at all, which is why every scrollbar rule on this site is
   inert there and why "it is white" was the report. But Chromium 121+ supports BOTH and lets the
   standard properties win, so applying them unconditionally would trade an 8px bar with a hover
   state for `thin` with neither. Offered only to an engine that cannot use the pseudo-elements; a
   browser that does not understand `selector()` drops the block, which is the right answer for
   Safari because Safari has them. */
@supports not selector(::-webkit-scrollbar) {
    .lf-rail__body, .lf-pop__list {
        scrollbar-width: thin;
        scrollbar-color: rgba(96,165,250,.5) rgba(0,0,0,.2);
    }
}

.lf-map-wrap { position: relative; min-width: 0; }
.lf-map { position: absolute; inset: 0; background: #0a0f1e; }

/* --------------------------------------------------------------------- controls */

/* The trough is gone: two tinted pills define the control on their own, and a grey box behind a
   7%-alpha tint only muddies both of them. */
.lf-seg { display: flex; gap: .25rem; padding: 0; border-radius: .5rem; background: transparent; }
.lf-seg button {
    flex: 1 1 0; padding: .35rem .5rem; border-radius: .375rem;
    font-size: .8125rem; font-weight: 600; color: #9aa4bd;
    /* `transparent`, not `0`: a border that appears only on the pressed button shifts both by 1px. */
    background: transparent; border: 1px solid transparent; cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}

/* Green is Vanilla and blue is DayZed EVERYWHERE on this wiki -- `.badge-vanilla` / `.badge-modded`
   in wiki-unified.css, whose own comment states the rule ("green is vanilla, blue is DayZed, amber
   was Deer Isle"), and `SOURCE_BTN_MAP` on the weapons page. A player who learned the colour on
   /wiki/weapons reads this control for free.
   The alphas are the weapons page's, byte for byte: .3 background and .5 border when active, .07 and
   .2 when not. Only the dim TEXT differs -- see below. */
.lf-seg button[data-mode="vanilla"] { background: rgba(22,163,74,.07);  border-color: rgba(34,197,94,.2);  color: #4ade80; }
.lf-seg button[data-mode="dayzed"]  { background: rgba(59,130,246,.07); border-color: rgba(96,165,250,.2); color: #60a5fa; }
.lf-seg button[data-mode="vanilla"][aria-pressed="true"] { background: rgba(22,163,74,.3);  border-color: rgba(34,197,94,.5);  color: #86efac; }
.lf-seg button[data-mode="dayzed"][aria-pressed="true"]  { background: rgba(59,130,246,.3); border-color: rgba(96,165,250,.5); color: #93c5fd; }
/* Scoped to the UNPRESSED button. A blanket `:hover { color: #e6ebf5 }` washes the mode colour off
   whichever one the pointer happens to be over, which is the one you are about to read. */
.lf-seg button[aria-pressed="false"]:hover { background: rgba(255,255,255,.06); }

/* The dim text is green-400/blue-400, not the weapons page's green-600/blue-500. Those land near
   2.4:1 against this rail's #12182a -- under AA for the label whose whole job is to tell you what
   you would be switching to. Backgrounds and borders are unchanged, so the two controls still read
   as the same component. */

.lf-field { width: 100%; padding: .5rem .625rem; border-radius: .5rem;
    border: 1px solid var(--border-subtle, rgba(255,255,255,.1));
    background: #0d1424; color: #e6ebf5; font-size: .875rem; }
.lf-field:focus { outline: 0; border-color: #4a9eff; }

.lf-label { display:block; margin: .875rem 0 .3rem; font-size: .6875rem; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase; color: #7f8aa3; }

/* ------------------------------------------------------------------ result list */

/* The selected item, kept above the ranked list when that list does not contain it -- which is the
   normal case, not an edge one: the rail shows 50 of ~2,690, so a deep-linked AKM (rank 1,165) or
   Mosin (466) is simply not in it, and every weapon page on the wiki links here by class name.
   Captioned and ruled off rather than silently jumping the rank order, because a row out of order
   with no explanation reads as a sorting bug. `:not(:empty)` so it costs no space when unused --
   which is why renderPinned() sets innerHTML = '' rather than leaving whitespace. */
.lf-pinned:not(:empty) {
    padding-bottom: .5rem;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.lf-pinned .lf-label { margin-top: .5rem; }
.lf-pinned:not(:empty) + .lf-results { margin-top: .35rem; }

.lf-results { display: flex; flex-direction: column; gap: .25rem; margin-top: .5rem; }

/* The row is a <button> and an <a> cannot live inside one, so the wiki link is a sibling and this
   wrapper is what puts it in the corner. Every row is wrapped, arrow or not, so the count column
   sits at the same place on neighbouring rows -- 663 of Chernarus's 2,690 items have no page. */
.lf-row-wrap { position: relative; display: block; }
.lf-row-link {
    position: absolute; top: .3rem; right: .35rem;
    display: inline-flex; padding: .1rem; border-radius: .25rem;
    color: #6f7b95; line-height: 0; transition: color .15s, background .15s;
}
.lf-row-link:hover { color: #93c5fd; background: rgba(255,255,255,.08); }
.lf-row-link:focus-visible { outline: 2px solid #4a9eff; outline-offset: 1px; }

.lf-row {
    display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: .55rem;
    width: 100%; padding: .35rem 1.4rem .35rem .45rem; border-radius: .5rem;
    background: transparent; border: 1px solid transparent; cursor: pointer; text-align: left;
}
.lf-row:hover { background: rgba(255,255,255,.05); }
.lf-row[aria-selected="true"] { background: #1c2942; border-color: #3d6ea8; }
.lf-row img { width: 34px; height: 34px; object-fit: contain; }
.lf-row__name { font-size: .8125rem; color: #e6ebf5; line-height: 1.2; }
.lf-row__class { font-size: .6875rem; color: #6f7b95; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.lf-row__count { font-size: .75rem; color: #9aa4bd; font-variant-numeric: tabular-nums; }

/* An item that cannot spawn is shown, greyed, with its reason. "Why can't I find X" is the question
   this tool exists to answer, and hiding those rows answers it worst. */
.lf-row--dead { opacity: .55; }
.lf-row--dead .lf-row__count { color: #b98b4a; }
.lf-note { grid-column: 2 / -1; font-size: .6875rem; color: #b98b4a; line-height: 1.25; }

/* ----------------------------------------------------------------------- facets */

.lf-chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.lf-chip {
    padding: .2rem .5rem; border-radius: 999px; font-size: .75rem; cursor: pointer;
    color: #9aa4bd; background: rgba(255,255,255,.05);
    border: 1px solid transparent; transition: background .15s, color .15s, border-color .15s;
}
.lf-chip:hover { color: #e6ebf5; }
.lf-chip[aria-pressed="true"] { background: #24304d; color: #fff; border-color: #3d6ea8; }
/* A facet the item itself already constrains: shown, so the user can see what the item permits, but
   not clickable — narrowing past the item's own rules would be meaningless. */
.lf-chip--implied { opacity: .6; cursor: default; border-style: dashed; }

/* A dot matching one of the three point colours, so the legend key and the map agree by eye. */
.lf-dot {
    display: inline-block; width: .55rem; height: .55rem; border-radius: 999px;
    margin-right: .35rem; vertical-align: baseline;
}

/* A result row's second line when the item is reachable only through a host item. Muted, because it
   is a weaker claim than "this container spawns it". */
.lf-note--host { color: #8fae86; }

/* ------------------------------------------------------------------ map overlays */

.lf-legend {
    position: absolute; left: .75rem; bottom: .75rem; z-index: 500;
    max-width: min(28rem, calc(100% - 1.5rem));
    /* Right padding leaves room for the close button rather than letting the heading run under it. */
    padding: .5rem 1.9rem .5rem .7rem; border-radius: .5rem;
    background: rgba(10,15,30,.86); border: 1px solid rgba(255,255,255,.1);
    color: #cdd6e6; font-size: .75rem; line-height: 1.35; backdrop-filter: blur(6px);
}
.lf-legend b { color: #fff; }

/* The close button. `.lf-legend` is already positioned, so it is the containing block.
   Sized to 1.75rem rather than to the glyph: this panel is most in the way on a phone, where the
   map is 55vh, and that is exactly where a 12px hit target is unusable. */
.lf-legend__x {
    position: absolute; top: .15rem; right: .2rem;
    width: 1.75rem; height: 1.75rem; line-height: 1.75rem;
    padding: 0; border: 0; border-radius: .375rem; background: transparent;
    color: #7f8aa3; font-size: 1.1rem; cursor: pointer;
    transition: background .15s, color .15s;
}
.lf-legend__x:hover { background: rgba(255,255,255,.08); color: #fff; }
.lf-legend__x:focus-visible { outline: 2px solid #4a9eff; outline-offset: -2px; }
.lf-legend__ramp { display: flex; height: 6px; margin: .35rem 0 .2rem; border-radius: 3px; overflow: hidden; }
.lf-legend__ramp i { flex: 1 1 0; }

.lf-badge {
    position: absolute; right: .75rem; top: .75rem; z-index: 500;
    padding: .3rem .6rem; border-radius: .5rem; font-size: .75rem;
    background: rgba(10,15,30,.86); border: 1px solid rgba(255,255,255,.1); color: #9aa4bd;
}

.lf-legend__hosts { margin-top: .45rem; padding-top: .4rem; border-top: 1px solid rgba(255,255,255,.1); }
.lf-host__toggle { display: flex; align-items: center; gap: .4rem; cursor: pointer; color: #cdd6e6; }
.lf-host__toggle input { accent-color: #3f7a34; }
.lf-host { display: flex; align-items: center; gap: .3rem; margin-top: .2rem; }
.lf-host span:first-of-type { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lf-host__p { color: #9aa4bd; font-variant-numeric: tabular-nums; }
.lf-host__more { margin-top: .2rem; color: #7f8aa3; font-size: .6875rem; }

.lf-key { margin-top: .3rem; }

/* The dynamic-event key: one chip per event kind, each with the icon it draws on the map so the
   two are matched by eye rather than by memory. Wraps rather than scrolls -- the legend sits over
   the map and a scrollbar there is a trap on touch. */
.lf-evtkey { display: flex; flex-wrap: wrap; gap: .2rem .6rem; margin-top: .35rem; }
.lf-evt { display: inline-flex; align-items: center; gap: .28rem; white-space: nowrap; }
.lf-evt img { display: block; }
.lf-evt b { font-weight: 600; font-variant-numeric: tabular-nums; }
.lf-evt-more { opacity: .7; align-self: center; }

/* Fixed placements. The diamond is the same shape the map draws, so the key and the markers are
   matched by eye rather than by reading. */
.lf-proxykey { display: flex; align-items: baseline; flex-wrap: wrap; gap: .3rem; }
.lf-diamond { width: .6rem; height: .6rem; display: inline-block; transform: rotate(45deg);
              border: 1px solid rgba(0,0,0,.55); flex: none; align-self: center; }
.lf-proxynote { flex-basis: 100%; opacity: .72; font-size: .72rem; }

.lf-pop__pool {
    display: inline-block; padding: .05rem .35rem; border-radius: .25rem;
    background: rgba(124,252,90,.15); color: #9fe58a; font-size: .6875rem;
}
.lf-pop__pool--event { background: rgba(240,180,41,.15); color: #f0b429; }
.lf-pop__pool--host { background: rgba(63,122,52,.2); color: #8fae86; }

/* Byte-for-byte the colours of the "Events only" badge on the wiki item page
   (bg-amber-900/30, text-amber-300, border-amber-700/50). Restated here rather than borrowing the
   Tailwind utilities so the badge does not depend on the Play CDN having scanned a dynamically
   inserted node -- the two surfaces disagreeing about these items is what this change exists to fix. */
.lf-events-only {
    display: inline-block; padding: .05rem .3rem; border-radius: .25rem;
    font-size: .625rem; font-weight: 500; line-height: 1.4;
    background: rgba(120, 53, 15, .3); color: #fcd34d; border: 1px solid rgba(180, 83, 9, .5);
}

.lf-pop__raw { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: #7f8aa3; }

/* --------------------------------------------------------------------- place names */

/* Town and village labels, drawn by `DayZMap.locationLayer`.
 *
 * These rules are the whole reason that module emits class names instead of an inline style string.
 * Seven templates on this site build the same labels from a copy-pasted `font-size: ...; color: ...`
 * literal, and three of them ALSO set `className: 'settlement-label'` without ever defining that
 * class -- so their labels render inside Leaflet's default white `.leaflet-div-icon` box. The first
 * rule below is the one those pages are missing.
 *
 * The type table is travel.html's, unchanged: yellow for the places you navigate by, red for a
 * point of interest, near-white for a village, grey for everything smaller. The text shadow is
 * doing real work -- the same label crosses snow, forest and tarmac tiles.
 */
.dz-loc-icon {
    background: transparent; border: 0;
    display: flex; align-items: center; justify-content: center;
    text-align: center; white-space: nowrap;
    /* The map underneath is clickable -- `onMapClick` opens the point popup -- and a 150px-wide
       label box swallowing those clicks would put a dead zone over every town. */
    pointer-events: none;
}

.dz-loc { text-shadow: 1px 1px 2px #000; font-size: 10px; font-weight: 400; color: #b0b8c4; }
.dz-loc--capital { font-size: 16px; font-weight: 700; color: #facc15; }
.dz-loc--city    { font-size: 14px; font-weight: 700; color: #facc15; }
.dz-loc--poi     { font-size: 12px; font-weight: 700; color: #ef4444; }
.dz-loc--village { font-size: 11px; font-weight: 700; color: #e5e7eb; }

/* The POI dot, which is the other half of a POI label. Same red as `.dz-loc--poi` above and
   declared next to it for that reason -- these are one mark in two parts. */
.dz-loc-dot { fill: #ef4444; stroke: #ffffff; }

/* ---------------------------------------------------------------------- caveats */

.lf-caveats { margin-top: .5rem; font-size: .6875rem; color: #7f8aa3; }
.lf-caveats summary { cursor: pointer; color: #9aa4bd; }
.lf-caveats ul { margin: .4rem 0 0 .9rem; list-style: disc; }
.lf-caveats li { margin-bottom: .25rem; }

.lf-empty { padding: 2rem 1rem; text-align: center; color: #7f8aa3; font-size: .875rem; }

.leaflet-popup-content-wrapper { background: #12182a; color: #e6ebf5; border-radius: .5rem; }
.leaflet-popup-tip { background: #12182a; }
.lf-pop__title { font-weight: 700; color: #fff; }
.lf-pop__sub { font-size: .75rem; color: #9aa4bd; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.lf-pop__list { margin-top: .4rem; max-height: 11rem; overflow-y: auto; font-size: .75rem; }
.lf-pop__list div { display: flex; justify-content: space-between; gap: .75rem; padding: .1rem 0; }

@media (max-width: 1023px) {
    .lf-shell { grid-template-columns: 1fr; grid-template-rows: 55vh auto; height: auto; }
    .lf-rail { order: 2; border-right: 0; border-top: 1px solid var(--border-subtle, rgba(255,255,255,.08)); }
    .lf-map-wrap { order: 1; height: 55vh; }
    .lf-rail__body { max-height: 45vh; }
}

/* ---------------------------------------------------------------- SEO / prose block
   The server-rendered answer that sits BELOW the tool. A sibling of `.lf-shell`, never a child --
   `.lf-shell` is a two-column grid and `loot-finder.js` replaces its innerHTML wholesale when a map
   has no data, so a child here would either break the layout or be deleted.

   `.lf-shell` is `height: calc(100vh - 4rem)` on desktop, so this is below the fold. That is fine:
   crawlers have no fold, and on mobile (where `.lf-shell` is `height:auto`) it follows naturally. */
.lf-seo { background: #0b0f14; border-top: 1px solid rgba(255,255,255,.06); }
.lf-seo__inner { max-width: 56rem; margin: 0 auto; padding: 2.5rem 1.25rem 3.5rem; }
.lf-seo__h1 { font-size: 1.6rem; line-height: 1.25; font-weight: 700; color: #fff; margin: 0 0 1rem; }
.lf-seo__h2 { font-size: 1.05rem; font-weight: 600; color: #fff; margin: 2rem 0 .6rem; }
.lf-seo__p { color: #c7d0d9; line-height: 1.65; margin: 0 0 .85rem; }
.lf-seo__p strong { color: #fff; font-weight: 600; }

.lf-seo__facts { display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1.25rem;
                 margin: 1.5rem 0; font-size: .9rem; }
.lf-seo__facts dt { color: #8b97a3; }
.lf-seo__facts dd { color: #e6edf3; margin: 0; }

/* Wide content scrolls inside its own box; the page body must never scroll sideways. */
.lf-seo__table { width: 100%; border-collapse: collapse; font-size: .9rem; display: block;
                 overflow-x: auto; }
.lf-seo__table th { text-align: left; color: #8b97a3; font-weight: 500;
                    border-bottom: 1px solid rgba(255,255,255,.08); padding: .4rem .75rem .4rem 0; }
.lf-seo__table td { color: #e6edf3; padding: .35rem .75rem .35rem 0;
                    border-bottom: 1px solid rgba(255,255,255,.04); }

.lf-seo__list, .lf-seo__links { margin: .5rem 0 0; padding-left: 1.1rem; color: #c7d0d9;
                                line-height: 1.7; font-size: .92rem; }
.lf-seo__links a, .lf-seo__more a, .lf-seo__grid a { color: #34d399; text-decoration: none; }
.lf-seo__links a:hover, .lf-seo__more a:hover, .lf-seo__grid a:hover { text-decoration: underline; }

/* The map hub lists every indexable item -- ~1,000 links -- so it has to stay compact. */
.lf-seo__grid { list-style: none; padding: 0; margin: .5rem 0 0; column-width: 14rem;
                column-gap: 1.5rem; font-size: .88rem; }
.lf-seo__grid li { break-inside: avoid; padding: .1rem 0; }

.lf-seo__more { margin: 1.75rem 0 0; font-size: .95rem; }
.lf-seo__built { margin: 2.5rem 0 0; color: #7d8994; font-size: .8rem; line-height: 1.6; }
.lf-seo__built code { color: #9aa7b2; }

/* Infected territories. A ring, not a filled dot: the circle on the map is an area the game spawns
   somewhere inside, and the legend mark should say the same thing the map does. */
.lf-ring {
    display: inline-block; width: 10px; height: 10px; border-radius: 50%;
    border: 2px solid; margin-right: .4rem; vertical-align: -1px;
}
.lf-zonenote { font-size: .6875rem; color: #9aa4bd; margin-top: .15rem; line-height: 1.3; }