/* loot-db.css - the /midnight-season-2-loot-database/ standalone page.

   RESTYLED 2026-08-14 to the v3 "fire on slate" Styka language, matching
   bis-convergence.css. The Ula'tek venom identity (serpent-scale texture, fang
   dividers, Fraunces display faces, loud all-caps kickers) is GONE. Base palette
   is the M+ tracker's (mplus-push/index.html :root), cross-checked against the
   tool's Dark tokens: slate/near-black surfaces, quiet borders, Figtree, one
   restrained gold accent. THE PAGE NOW FOLLOWS THE VIEWER'S THEME (owner directive
   2026-08-14 + the same-day ruling "just follow styka sheets theme", lane
   s2-polish): those surface/text/border literals are var() ALIASES of the
   tool's own theme tokens, and so is the ACCENT - that fixed gold pair happened
   to equal the DEFAULT theme's accent pair, so Dark is unchanged and every
   other theme now moves the accents with it too.

   NO HEAT RAMP HERE, deliberately. The contested page's ordinal ember ramp
   encodes a real magnitude (spec count); this page has no contest data, so
   inventing a heat scale would be a lie. The fire language shows up only in the
   BRAND accents: the hero rail + gradient title, the section rails, and the
   special-item tag pills (Very Rare / Tier / Cantrip), where it marks a genuine
   item property rather than a fake ranking.

   CHROME NEUTRALITY (2026-08-14, the framed-chrome conversion): every page token
   is declared on .s2page - the page's own content wrapper inside .shell-scroll -
   and NOWHERE on :root / body. That is load-bearing: the shared top bar and its
   Battle.net auth chrome read --accent / --bg-* / --text-* from style.min.css's
   own :root, so a token re-declared on body would tint the SHARED header. Scoping
   to .s2page keeps the page's full identity INSIDE the shell and the site chrome
   standard. Same rule for the bare element selectors below (a / :focus-visible):
   both are .s2page-prefixed so they cannot reach the header or the footer chrome.
   The old THEME ARMOR + SCROLL ARMOR blocks are retired with that conversion -
   the page now lives inside the app shell, so there is no body overflow to fight
   and the standard theme gutters outside the 1400px shell are correct. */
.s2page{
  /* SURFACES / TEXT / BORDERS ALIAS THE SITE THEME (owner directive 2026-08-14,
     lane s2-polish). Each of these used to be a hardcoded slate literal that
     happened to equal the DEFAULT Dark theme's value, so the page looked right
     on Dark and ignored every other theme. They are now var() aliases into
     style.min.css's own :root tokens (style-parts/01-themes.css), which makes
     the page follow the viewer's theme; the token NAMES are unchanged, so every
     rule below this block is untouched. */
  --bg:var(--bg-body);
  --bg2:var(--bg-input);
  --panel:var(--bg-card);
  --panel2:var(--bg-input);
  --hover:var(--bg-hover);
  --line:var(--border-primary);
  --line2:var(--border-secondary);
  --ink:var(--text-primary);
  --muted:var(--text-secondary);
  --faint:var(--text-muted);
  --link:var(--text-link);
  /* THE ACCENT LAYER FOLLOWS THE THEME TOO (owner ruling 2026-08-14: "just
     follow styka sheets theme" - it SUPERSEDES the earlier "controls stay"
     rule). The page's fixed gold pair happened to equal the DEFAULT theme's
     accent pair, so Dark is unchanged and every other theme now moves the
     chips, pills, rails, active states and focus rings with it. Tints with no
     site token are derived via color-mix, never pinned to a hex. --accent /
     --accent2 are NOT redeclared here: the page INHERITS them from :root, and a
     self-referential "--accent:var(--accent)" would be an invalid CSS cycle. */
  --accentdim:color-mix(in srgb, var(--accent) 13%, transparent);

  /* Brand fire - accents only, never a data scale on this page. */
  --ember:#ffa869;
  --ember2:#eb8a3e;
  --ember3:#bd6a24;
  --ember-glow:rgba(255,168,105,.40);

  --cantrip:#7ecfd0;
  --radius:10px;
}
.s2page,
.s2page *{box-sizing:border-box;}
.s2page{
  position:relative;
  min-height:100%;
  background:var(--bg);
  color:var(--ink);
  font-family:"Figtree",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
.s2page a{color:var(--link); text-decoration:none;}
.s2page :focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:6px;}
/* Smooth in-page anchor jumps now belong to the shell scroller, not <html>. */
.shell-scroll:has(.s2page){scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){.shell-scroll:has(.s2page){scroll-behavior:auto;}}

/* ---------- footer chrome ---------- */
/* The static .pin header block is GONE (framed-chrome conversion, 2026-08-14) -
   the shared includes/header.php top bar is this page's only header now. */

.wrap{max-width:1180px; margin:0 auto; padding:24px 22px 56px;}

/* ---------- kept-current banner ---------- */
.kept{max-width:1180px; margin:20px auto 0; padding:0 22px;}
.kept-inner{
  display:flex; align-items:flex-start; gap:11px;
  background:var(--panel);
  border:1px solid var(--line);
  border-left:2px solid var(--accent2);
  border-radius:var(--radius);
  padding:12px 16px;
}
.pulse{flex-shrink:0; margin-top:6px; width:7px; height:7px; border-radius:50%; background:var(--accent2);}
.kept p{margin:0; font-size:13.5px; color:var(--muted); line-height:1.55;}
.kept p b{color:var(--ink); font-weight:600;}

/* ---------- hero ---------- */
.titleblock{
  position:relative; margin:0 0 22px; padding:22px 24px 20px;
  border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden;
  background:
    radial-gradient(120% 150% at 0% 0%, rgba(255,168,105,.10), transparent 58%),
    var(--panel);
}
.titleblock::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,var(--ember),var(--ember2) 34%,var(--ember3) 62%,transparent);
}
.titleblock h1{
  margin:0;
  font-size:clamp(26px,3.4vw,36px);
  font-weight:700; letter-spacing:-.2px; line-height:1.2;
  background:linear-gradient(96deg,#fff4e8 6%,var(--ember) 42%,var(--ember2) 78%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}
.titleblock h1 .t-lead,
.titleblock h1 .t-accent,
.titleblock h1 .t-tail{color:inherit;}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .titleblock h1{color:#e2e8f0; background:none;}
}
.subtitle{margin:11px 0 0; color:var(--muted); font-size:15.5px; max-width:78ch; line-height:1.6;}
.chips{display:flex; flex-wrap:wrap; gap:7px; margin:15px 0 0;}
.chip{
  font-size:12px; color:var(--faint);
  border:1px solid var(--line); border-radius:6px; padding:4px 10px;
  background:var(--panel2);
}
.chip b{color:var(--muted); font-weight:600;}
a.chip-link{color:var(--muted);}
a.chip-link:hover{color:var(--accent); border-color:var(--line2);}
.provnote{margin:13px 0 0; font-size:12.5px; color:var(--faint); max-width:88ch; line-height:1.6;}

/* ---------- top-matter disclosure ---------- */
.topdet{
  margin:0 0 14px; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--panel); font-size:13px;
}
.topdet > summary{
  list-style:none; cursor:pointer; padding:10px 14px;
  color:var(--muted); font-weight:600;
  display:flex; align-items:center; gap:8px;
}
.topdet > summary::-webkit-details-marker{display:none;}
.topdet > summary::before{
  content:""; width:0; height:0; flex-shrink:0;
  border-left:5px solid currentColor;
  border-top:4px solid transparent; border-bottom:4px solid transparent;
  transition:transform .12s;
}
.topdet[open] > summary::before{transform:rotate(90deg);}
.topdet > summary:hover{color:var(--ink);}
.topdet .dbody{padding:2px 15px 13px; border-top:1px solid var(--line);}
.topdet .provnote{margin:8px 0 0;}
.secintro{
  display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical;
  overflow:hidden;
}

/* ---------- section jump nav ---------- */
.secnav{display:flex; flex-wrap:wrap; gap:6px; margin:0 0 16px;}
.secnav a{
  font-size:12.5px; font-weight:500; color:var(--muted);
  border:1px solid var(--line); border-radius:6px;
  padding:5px 11px; background:var(--panel2); white-space:nowrap;
  transition:color .12s,border-color .12s,background .12s;
}
.secnav a:hover{color:var(--accent); border-color:var(--line2); background:var(--hover);}

/* ---------- filter bar ---------- */
/* top:0 since the framed-chrome conversion - the sticky offset used to clear the
   44px .pin bar, and the shell's own top bar is outside this scroller. */
.filterbar{
  position:sticky; top:0; z-index:30;
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  background:rgba(13,18,32,.96);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:10px 12px;
  margin:0 0 22px;
}
.filterbar input[type="search"],
.filterbar select{
  background:var(--panel2); color:var(--ink);
  border:1px solid var(--line2); border-radius:6px;
  font:inherit; font-size:13px; padding:6px 10px; outline:none;
}
.filterbar input[type="search"]{flex:1 1 210px; min-width:160px;}
.filterbar select{flex:0 1 auto; cursor:pointer;}
.filterbar input[type="search"]:focus,
.filterbar select:focus{border-color:var(--accent2);}
.filterbar button{
  background:var(--panel2); color:var(--muted);
  border:1px solid var(--line2); border-radius:6px;
  font:inherit; font-size:12.5px; font-weight:500;
  padding:6px 12px; cursor:pointer;
  transition:color .12s,border-color .12s,background .12s;
}
.filterbar button:hover{color:var(--ink); background:var(--hover);}
.fcount{margin-left:auto; font-size:12.5px; color:var(--faint); white-space:nowrap; font-variant-numeric:tabular-nums;}
@media(max-width:760px){.fcount{margin-left:0; width:100%; text-align:right;}}

/* ---------- sections ---------- */
.lsec{margin:0 0 34px; scroll-margin-top:120px;}
.sechead{
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  padding-bottom:9px; margin-bottom:6px;
  border-bottom:1px solid var(--line2);
  position:relative;
}
/* a short ember rule under each section title - brand accent, not a data signal */
.sechead::after{
  content:""; position:absolute; left:0; bottom:-1px; width:56px; height:1px;
  background:linear-gradient(90deg,var(--ember2),transparent);
}
.sechead h2{margin:0; font-size:19px; font-weight:600; color:#e2e8f0; letter-spacing:-.1px;}
.secintro{margin:10px 0 16px; color:var(--muted); font-size:13.5px; max-width:88ch; line-height:1.6;}
.inlink{color:var(--accent2); border-bottom:1px solid color-mix(in srgb, var(--accent2) 40%, transparent);}
.inlink:hover{color:var(--accent);}
.sec-empty .lgroup{display:none;}
.sec-empty::after{
  content:"No items match the current filters in this section.";
  display:block; color:var(--faint); font-size:13px;
  padding:14px 0;
}
.emptysec{
  color:var(--faint); font-size:13.5px; line-height:1.6;
  padding:14px 0; max-width:88ch;
}

/* ---------- groups (boss / dungeon) : thin-rule headers ---------- */
.lgroup{margin:0 0 4px; border-bottom:1px solid var(--line);}
.lgroup:last-child{border-bottom:none;}
.ghead{padding:16px 0 9px;}
.gtitle{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;}
.gtitle h3{margin:0; font-size:15px; font-weight:600; color:var(--ink);}
.gpos{font-size:11.5px; color:var(--faint);}
.gtag{
  font-size:11px; font-weight:600; color:var(--faint);
  border:1px solid var(--line); border-radius:5px; padding:1px 7px;
  background:var(--panel2);
}
.gtag-new{color:var(--ember2); border-color:rgba(235,138,62,.4); background:rgba(235,138,62,.09);}
.gcount{margin-left:auto; font-size:12px; color:var(--faint); font-variant-numeric:tabular-nums;}
.gilvls{margin:6px 0 0; font-size:12.5px; color:var(--faint);}
.gblurb{margin:6px 0 0; font-size:13px; color:var(--muted); line-height:1.6; max-width:88ch;}

/* ---------- loot tables ---------- */
.tscroll{overflow-x:auto;}
.loot-table{width:100%; border-collapse:collapse; min-width:640px;}
.loot-table thead th{
  text-align:left; font-size:11.5px; font-weight:600;
  color:var(--faint); padding:9px 12px;
  border-bottom:1px solid var(--line2); white-space:nowrap;
}
.loot-table tbody td{
  padding:9px 12px; font-size:13.5px; vertical-align:top;
  border-bottom:1px solid var(--line);
}
.loot-table tbody tr:last-child td{border-bottom:none;}
.loot-table tbody tr:hover td{background:var(--hover);}
.c-item{width:52%;}

/* the item cell: icon leads, body beside it */
.iwrap{display:flex; align-items:flex-start; gap:10px;}
.iico{
  flex-shrink:0; width:28px; height:28px;
  border-radius:4px; border:1px solid #000;
  background:var(--panel2);
}
.ibody{min-width:0; display:flex; flex-wrap:wrap; align-items:baseline; gap:6px;}
.iname{font-weight:600; color:#e2e8f0;}
/* the ICON is the tooltip trigger + the link; the name is plain text */
a.whl{display:inline-flex; line-height:0; flex-shrink:0; cursor:pointer; color:inherit;}
a.whl:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:5px;}
a.whl:hover .iico{border-color:var(--accent2);}
.c-boss{color:var(--muted); white-space:nowrap;}
.c-slot{color:var(--ink); white-space:nowrap;}
.c-type{color:var(--faint); white-space:nowrap;}
.fx{width:100%; font-size:12.5px; color:var(--faint); margin-top:2px; line-height:1.55; max-width:70ch;}
.inote{width:100%; font-size:12px; color:var(--accent2); margin-top:2px;}

/* ---------- item tags ----------
   Fire shows up HERE, on genuine item properties (Very Rare / Tier / Cantrip),
   never as a fabricated ranking. */
.tag{
  display:inline-block; font-size:10.5px; font-weight:600; letter-spacing:.2px;
  border-radius:5px; padding:1px 7px; white-space:nowrap;
  color:var(--faint); border:1px solid var(--line); background:var(--panel2);
}
.tag-very-rare{color:var(--ember); border-color:rgba(255,168,105,.45); background:rgba(255,168,105,.10);}
.tag-tier-token{color:var(--accent); border-color:color-mix(in srgb, var(--accent) 42%, transparent); background:var(--accentdim);}
.tag-cantrip{color:var(--cantrip); border-color:rgba(126,207,208,.35); background:rgba(126,207,208,.08);}
.tag-special-effect{color:var(--accent2); border-color:color-mix(in srgb, var(--accent2) 35%, transparent);}
.tag-mount{color:#e8a4c0; border-color:rgba(232,164,192,.32); background:rgba(232,164,192,.07);}
.tag-pet{color:#9ad0a0; border-color:rgba(154,208,160,.28); background:rgba(154,208,160,.06);}
.tag-decor,.tag-pattern{color:var(--faint); border-color:var(--line);}

/* ---------- ilvl reference cards ---------- */
.ilvl-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:12px;}
.ilvl-card{
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); padding:15px 16px;
}
.ilvl-title{font-size:13.5px; font-weight:600; color:var(--ink); margin:0 0 10px;}
.ilvl-table{width:100%; border-collapse:collapse; min-width:250px;}
.ilvl-table th{
  text-align:left; font-size:11px; font-weight:600;
  color:var(--faint); padding:6px 8px; border-bottom:1px solid var(--line2);
}
.ilvl-table td{
  padding:6px 8px; font-size:12.5px; color:var(--muted);
  border-bottom:1px solid var(--line);
  font-variant-numeric:tabular-nums;
}
.ilvl-table tr:last-child td{border-bottom:none;}
.ilvl-note{margin-top:10px; font-size:12px; color:var(--faint); line-height:1.55;}

/* ---------- in-content related-tools strip ---------- */
/* One quiet row of sibling Season 2 sheets - the cross-link home now that the
   page ends on the shared includes/footer.php (which carries only the standard
   site links, never per-page cross-links). */
.s2rel{max-width:1180px; margin:26px auto 0; padding:0 22px 6px; text-align:center; font-size:13px; line-height:1.9;}
.s2rel-label{color:var(--muted); margin-right:6px;}
.s2rel a{color:var(--accent2); text-decoration:none;}
.s2rel a:hover{color:var(--accent); text-decoration:underline;}
.s2rel-sep{color:var(--faint); margin:0 7px;}

@media (max-width:700px){
  .wrap{padding:20px 14px 44px;}
  .kept{padding:0 14px;}
  .filterbar{top:40px;}
  .lsec{scroll-margin-top:158px;}
  .c-item{width:auto;}
  .loot-table{min-width:560px;}
}