/* Enlisted database (tech tree board, tiles, folder pop-over, focus highlight).
   Plain CSS because grid positions come from the data (inline style) and Tailwind only scans views/**.
   Colours follow the site: gold #e8b000, slate dark mode (class "dark" on <html>). */

/* ── Board (desktop >= 900px) ─────────────────────────────────────────────── */
.en-desktop { display: none; }
.en-mobile  { display: block; }
@media (min-width: 900px) {
    .en-desktop { display: block; }
    .en-mobile  { display: none; }
}

.en-board-wrap {
    position: relative;
    overflow-x: auto;   /* horizontal only: the board is as tall as it needs to be, the page scrolls vertically */
    overflow-y: hidden;
    border: 1px solid #e5e7eb;
    border-radius: .75rem;
    background: #fff;
    cursor: grab;
    overscroll-behavior-x: contain;   /* vertical wheel/trackpad scroll must still reach the page */
}
.dark .en-board-wrap { background: #1e293b; border-color: #374151; }
.en-board-wrap.is-dragging { cursor: grabbing; user-select: none; }
.en-board-wrap:focus-visible { outline: 2px solid #e8b000; outline-offset: 2px; }

.en-board {
    display: grid;
    grid-template-rows: 2.5rem;
    grid-auto-rows: 9.5rem;
    width: max-content;
    min-width: 100%;
    position: relative;
}
.en-tierhead {
    position: sticky; top: 0; z-index: 5;
    display: flex; align-items: center; justify-content: center;
    background: #f1f5f9; color: #374151;
    border-bottom: 1px solid #e5e7eb; border-left: 1px solid #e5e7eb;
    font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.dark .en-tierhead { background: #0f172a; color: #e5e7eb; border-color: #374151; }
.en-corner { position: sticky; top: 0; left: 0; z-index: 7; background: #f1f5f9; border-bottom: 1px solid #e5e7eb; }
.dark .en-corner { background: #0f172a; border-color: #374151; }
.en-lane-label {
    position: sticky; left: 0; z-index: 4;
    display: flex; align-items: center;
    padding: 0 .5rem .0 .75rem;
    background: #f8fafc; color: #374151;
    border-right: 1px solid #e5e7eb; border-top: 1px solid #f1f5f9;
    font-size: .75rem; font-weight: 600; line-height: 1.2;
}
.dark .en-lane-label { background: #172033; color: #d1d5db; border-color: #374151; }
.en-lane-label.is-cont { color: transparent; border-top-color: transparent; }
.en-trunk { z-index: 0; align-self: center; height: 2px; margin: 0 4.75rem; background: #cbd5e1; pointer-events: none; }
.dark .en-trunk { background: #475569; }

.en-box { position: relative; z-index: 1; padding: .375rem; min-width: 0; }
.en-box.is-open, .en-box:focus-within { z-index: 30; }
.en-box.is-last-lane > .en-pop { top: auto; bottom: calc(100% - 1.25rem); }
.en-box .en-tile { height: 100%; }

/* ── Tile (board, folder variants, mobile grid, Premium & Event) ───────────── */
.en-tile {
    position: relative; display: flex; flex-direction: column; overflow: hidden; text-align: left;
    background: #fff; border: 1px solid #e5e7eb; border-radius: .5rem; text-decoration: none;
    transition: border-color .15s, background-color .15s;
}
.dark .en-tile { background: #1e293b; border-color: #374151; }
.en-tile:hover { border-color: rgba(232, 176, 0, .7); }
.en-thumb { position: relative; display: flex; align-items: center; justify-content: center; flex-shrink: 0; height: 6.25rem; padding: .25rem; overflow: hidden; background: #f1f5f9; }
.dark .en-thumb { background: rgba(15, 23, 42, .6); }
/* the source panels have wide dark margins around the item: zoom in a bit so weapons are recognisable */
.en-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; transform: scale(1.3); }
/* 3D renders are already cropped to the item: fill the area with a small margin, no zoom */
.en-thumb img.is-render { transform: none; width: 100%; height: 100%; padding: 4px; box-sizing: border-box; }
.en-noimg { font-size: 11px; color: #9ca3af; }
/* Datamine item images are dark photo cards (cropped tight by tools/enlisted-datamine-match.py): dark ground in both themes, no zoom */
.en-thumb.is-dm, .dark .en-thumb.is-dm { background: #14110f; padding: 0; }
.en-thumb img.is-dm { transform: none; width: 100%; height: 100%; object-fit: cover; }
.en-br {
    position: absolute; right: .375rem; bottom: .375rem; z-index: 2; padding: .125rem .45rem; border-radius: 9999px;
    background: rgba(15, 23, 42, .85); color: #fff; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: .02em;
}
.en-name {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    flex: 1 1 auto; min-height: 2.1rem; padding: .25rem .5rem 0; font-size: .75rem; font-weight: 600; line-height: 1.2; color: #111827;
}
.dark .en-name { color: #f3f4f6; }
.en-name { padding-right: 2.4rem; }
/* unlock status: tab flush in the bottom right corner (follows the rounded corner of the card), grey closed lock = locked, green open lock = unlocked */
.en-lock-tab {
    position: absolute; right: 0; bottom: 0; z-index: 2;
    display: inline-flex; align-items: center; justify-content: center; width: 2.1rem; height: 1.65rem;
    border-top-left-radius: .6rem; border-bottom-right-radius: .45rem;
}
.en-lock-tab.is-locked   { background: #9ca3af; color: #374151; }
.en-lock-tab.is-unlocked { background: #4ade80; color: #14532d; }
/* corner badge (top left of the image): squad logo and/or acquisition symbol */
.en-badges {
    position: absolute; left: .375rem; top: .375rem; z-index: 2;
    display: inline-flex; align-items: center; gap: .2rem; padding: .15rem .25rem; border-radius: .5rem;
    background: rgba(15, 23, 42, .78); box-shadow: 0 0 0 1px rgba(255, 255, 255, .12);
}
.en-thumb .en-badges img, .en-card-thumb .en-badges img { display: block; transform: none; max-width: none; max-height: none; width: 1.5rem; height: 1.5rem; object-fit: contain; padding: 0; }
.en-badges .en-badge-squad { width: 1.75rem; height: 1.75rem; border-radius: .25rem; background: #f1f5f9; }
.en-thumb .en-badges .en-badge-squad, .en-card-thumb .en-badges .en-badge-squad { width: 1.75rem; height: 1.75rem; }
.en-badges.has-squad .en-badge-acq { width: 1.1rem; height: 1.1rem; }
.en-thumb .en-badges.has-squad .en-badge-acq, .en-card-thumb .en-badges.has-squad .en-badge-acq { width: 1.1rem; height: 1.1rem; }
.en-badges.is-sm { left: .2rem; top: .2rem; padding: .1rem .15rem; }
.en-card-thumb .en-badges.is-sm img { width: 1.15rem; height: 1.15rem; }
.en-card-thumb .en-badges.is-sm .en-badge-squad { width: 1.3rem; height: 1.3rem; }
.en-card-thumb .en-badges.is-sm.has-squad .en-badge-acq { width: .9rem; height: .9rem; }
.en-badge-squad-txt { display: inline-flex; align-items: center; justify-content: center; color: #0f172a; font-size: 11px; font-weight: 700; }
.en-tile.is-owned, .dark .en-tile.is-owned { border-color: rgba(74, 222, 128, .55); }
.en-rib {
    position: absolute; left: 0; top: 0; padding: .125rem .375rem; border-radius: 0 0 .25rem 0;
    background: #e8b000; color: #0f172a; font-size: 10px; font-weight: 700; line-height: 1; text-transform: uppercase;
}
.en-rib.is-right { left: auto; right: 0; border-radius: 0 0 0 .25rem; }
.en-tile:focus-visible, .en-card:focus-visible, .en-fold:focus-visible, .en-chip:focus-visible { outline: 2px solid #e8b000; outline-offset: 2px; }
.en-tile.is-focus { outline: 3px solid #e8b000; outline-offset: 2px; animation: en-pulse 1.6s ease-out 3; }
@keyframes en-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(232, 176, 0, .65); }
    100% { box-shadow: 0 0 0 14px rgba(232, 176, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .en-tile, .en-card { transition: none; }
    .en-tile.is-focus { animation: none; }
}
.en-ghost { border-style: dashed; background: transparent; }
.dark .en-ghost { background: transparent; }
.en-ghost .en-name { color: #9ca3af; }

/* ── List card ────────────────────────────────────────────────────────────── */
.en-card {
    position: relative; display: flex; gap: .75rem; overflow: hidden; padding: .625rem 2.6rem .625rem .625rem; text-decoration: none;
    background: #fff; border: 1px solid #e5e7eb; border-radius: .5rem; transition: border-color .15s;
}
.dark .en-card { background: #1e293b; border-color: #374151; }
.en-card.is-owned, .dark .en-card.is-owned { border-color: rgba(74, 222, 128, .55); }
.en-card:hover { border-color: rgba(232, 176, 0, .7); }
.en-card-thumb { position: relative; display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 6rem; height: 3.5rem; border-radius: .25rem; background: #f1f5f9; }
.dark .en-card-thumb { background: rgba(15, 23, 42, .6); }
.en-card-thumb.is-square { width: 4.25rem; height: 4.25rem; }
.en-card-thumb.is-dm, .dark .en-card-thumb.is-dm { background: #14110f; }
.en-card-thumb img.is-dm { width: 100%; height: 100%; object-fit: contain; }
.en-card-thumb .en-br { right: .2rem; bottom: .2rem; padding: .05rem .35rem; font-size: 9px; }
.en-card-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.en-card-thumb img.is-render { width: 100%; height: 100%; padding: 3px; box-sizing: border-box; }
.en-card-thumb.is-empty { border: 1px dashed #d1d5db; font-size: 10px; line-height: 1.1; text-align: center; color: #9ca3af; }
.dark .en-card-thumb.is-empty { border-color: #4b5563; }
.en-card-body { min-width: 0; flex: 1; }
.en-card-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .875rem; font-weight: 600; color: #111827; }
.dark .en-card-name { color: #f3f4f6; }
.en-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0 .375rem; margin-top: .125rem; font-size: .75rem; color: #6b7280; }
.dark .en-card-meta { color: #9ca3af; }
.en-card-meta > span + span::before { content: "\00b7"; margin-right: .375rem; }
.en-card-fac { display: inline-flex; align-items: center; gap: .25rem; }
.en-card-note { display: inline-block; margin-top: .25rem; padding: .125rem .375rem; border-radius: .25rem; background: #fef3c7; color: #92400e; font-size: 10px; font-weight: 600; }
.dark .en-card-note { background: rgba(245, 158, 11, .15); color: #fcd34d; }

/* Folder: triangle button + variant pop-over */
.en-fold {
    position: absolute; right: .6rem; top: .6rem; z-index: 3;
    display: inline-flex; align-items: center; gap: .2rem; height: 1.6rem; padding: 0 .45rem 0 .35rem; border: 1px solid rgba(255, 255, 255, .55); border-radius: 9999px; cursor: pointer;
    background: rgba(15, 23, 42, .92); color: #fff; font: inherit; font-size: 11px; font-weight: 700; line-height: 1;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .45);
}
.en-fold svg { flex-shrink: 0; color: #e8b000; }
.en-fold:hover, .en-box.is-open .en-fold { background: #e8b000; color: #0f172a; border-color: #0f172a; }
.en-fold:hover svg, .en-box.is-open .en-fold svg { color: #0f172a; }
.en-pop {
    display: none;
    position: absolute; left: .375rem; top: calc(100% - 1.25rem); z-index: 40;
    width: max-content; max-width: 22rem; gap: .375rem; flex-wrap: wrap; padding: .375rem;
    background: #fff; border: 1px solid #e5e7eb; border-radius: .5rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .18);
}
.dark .en-pop { background: #1e293b; border-color: #475569; }
.en-box.is-open > .en-pop { display: flex; }
/* without JS the pop-over opens on hover/keyboard focus */
html:not(.en-js) .en-box:hover > .en-pop,
html:not(.en-js) .en-box:focus-within > .en-pop { display: flex; }
.en-pop .en-tile { width: 9rem; height: auto; }
.en-pop .en-thumb { height: 3.75rem; }

/* ── Mobile tier tabs ─────────────────────────────────────────────────────── */
.en-tabs { display: flex; gap: .375rem; overflow-x: auto; padding-bottom: .25rem; }
.en-tier-panel[hidden] { display: none; }
.en-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: .5rem; }
.en-grid .en-tile { height: 100%; }

/* ── Detail ───────────────────────────────────────────────────────────────── */
.en-media { position: relative; }
.en-delta.is-good { color: #15803d; }
.en-delta.is-bad  { color: #b91c1c; }
.dark .en-delta.is-good { color: #4ade80; }
.dark .en-delta.is-bad  { color: #f87171; }
.en-media img { image-rendering: auto; }

.en-hidden-search { display: none !important; }

/* 3D view (assets/enlisted-3d.js): stage overlays the hero image (no layout shift), image stays as placeholder */
/* hero box: fixed aspect (no layout shift), image and 3D viewer fill the same inner box (padding = --en-hero-pad) */
.en-hero { --en-hero-pad: 14px; aspect-ratio: 16 / 7; min-height: 12rem; padding: var(--en-hero-pad) !important; display: flex; align-items: center; justify-content: center; margin: 0; overflow: hidden; }
@media (min-width: 640px) { .en-hero { min-height: 15rem; } }
.en-hero-img { display: block; width: 100%; height: 100%; object-fit: contain; }
.en-hero.is-dm, .dark .en-hero.is-dm { background: #14110f; border-color: #292524; }
.en-3d-stage { position: absolute; inset: var(--en-hero-pad, 0); opacity: 0; pointer-events: none; transition: opacity .25s ease; border-radius: inherit; overflow: hidden; }
.en-3d-stage model-viewer { width: 100%; height: 100%; --poster-color: transparent; background: transparent; }
.en-media.is-3d .en-3d-stage { opacity: 1; pointer-events: auto; }
.en-media.is-3d [data-en3d-image] { visibility: hidden; }
.en-3d-bar { position: absolute; top: .5rem; right: .5rem; z-index: 2; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; justify-content: flex-end; }
.en-3d-bar[hidden], .en-3d-load[hidden], .en-3d-progress[hidden] { display: none; }
.en-3d-group { display: inline-flex; border: 1px solid rgba(100,116,139,.5); border-radius: .5rem; overflow: hidden; background: rgba(255,255,255,.9); }
.en-3d-btn, .en-3d-select { font: inherit; font-size: .75rem; font-weight: 600; line-height: 1; padding: .4rem .65rem; color: #334155; background: transparent; border: 0; cursor: pointer; }
.en-3d-select { border: 1px solid rgba(100,116,139,.5); border-radius: .5rem; background: rgba(255,255,255,.9); max-width: 12rem; }
.en-3d-load { border: 1px solid rgba(100,116,139,.5); border-radius: .5rem; background: rgba(255,255,255,.9); }
.en-3d-btn[aria-pressed="true"] { background: #e8b000; color: #0f172a; }
.en-3d-btn:disabled { opacity: .45; cursor: not-allowed; }
.en-3d-btn:focus-visible, .en-3d-select:focus-visible { outline: 2px solid #e8b000; outline-offset: 2px; }
.dark .en-3d-group, .dark .en-3d-select, .dark .en-3d-load { background: rgba(15,23,42,.85); }
.dark .en-3d-btn, .dark .en-3d-select { color: #e2e8f0; }
.dark .en-3d-btn[aria-pressed="true"] { background: #e8b000; color: #0f172a; }
.en-3d-progress { position: absolute; left: .75rem; right: .75rem; bottom: 1.75rem; height: 4px; border-radius: 2px; background: rgba(100,116,139,.3); overflow: hidden; }
.en-3d-progress span { display: block; height: 100%; width: 0; background: #e8b000; transition: width .2s ease; }
.en-3d-status { position: absolute; left: .75rem; right: .75rem; bottom: .4rem; margin: 0; font-size: .7rem; color: #64748b; text-align: left; pointer-events: none; }
.en-3d-status:empty { display: none; }
.dark .en-3d-status { color: #94a3b8; }
@media (prefers-reduced-motion: reduce) { .en-3d-stage, .en-3d-progress span { transition: none; } }

/* squad detail: the squad picture fills the hero box, the emblem (badge) sits small in the top left corner */
.en-hero.is-squadpic { --en-hero-pad: 0px; position: relative; }
.en-hero.is-squadpic .en-hero-img { object-fit: cover; }
.en-hero-emblem { position: absolute; left: .625rem; top: .625rem; z-index: 2; width: 3.25rem; height: 3.25rem; object-fit: contain; padding: .25rem; border-radius: .6rem; background: rgba(15, 23, 42, .78); box-shadow: 0 0 0 1px rgba(255, 255, 255, .12); }