/* /logs/ — the combat log analyzer. Same tokens and type as the rest of wowdata.app (see prototypes/pve/index.html
   and prototypes/map/map.css); denser, because a damage table wants rows, not padding. */
:root {
  --ground: #0B0E14; --surface: #141A24; --surface-2: #1B2330; --ink: #E9E5DA; --muted: #8A93A6; --rule: #26303F;
  --gold: #D9A441; --gold-soft: #3A2F16; --green: #5FD068; --red: #E06060; --blue: #6FA8F5; --amber: #E0A85A;
  --display: "Barlow Condensed", "Arial Narrow", sans-serif;
  --body: "IBM Plex Sans", -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
}
* { box-sizing: border-box; }
/* Several blocks below set display on an element that is also toggled with [hidden] (the drop overlay, the
   two screens, the toast). A class selector beats the user-agent [hidden] rule, so say it once, here. */
[hidden] { display: none !important; }
html, body { height: 100%; }
body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--body); font-size: 14px; line-height: 1.5;
  display: flex; flex-direction: column; min-height: 100%; }
main { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
code { font-family: var(--mono); font-size: .92em; color: var(--ink); background: var(--surface-2); padding: 1px 5px; border-radius: 0; overflow-wrap: anywhere; }
a { color: var(--gold); }

/* ---------- top bar ---------- */
.lg-top { display: flex; align-items: center; gap: 14px; padding: 8px 16px; border-bottom: 1px solid var(--rule); background: var(--surface); flex: 0 0 auto; }
.lg-brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink); }
.lg-brand .mark { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 0; background: var(--gold); color: #1a1408; font: 700 13px/1 var(--display); }
.lg-brand .bname { font: 600 16px/1 var(--display); letter-spacing: .03em; color: var(--muted); }
.lg-top h1 { margin: 0; font: 700 22px/1 var(--display); letter-spacing: .02em; }
.lg-privacy { margin: 0 auto 0 4px; font-family: var(--display); font-size: 14px; color: var(--green); border: 1px solid #244a28; background: #101a12; padding: 3px 8px; border-radius: 0; }
.lg-btn { font: 600 15px/1 var(--display); letter-spacing: .03em; padding: 8px 14px; border-radius: 0; border: 1px solid var(--gold); background: var(--gold); color: #1a1408; cursor: pointer; }
.lg-btn:hover { filter: brightness(1.08); }
.lg-btn.ghost { background: var(--surface); color: var(--ink); border-color: var(--rule); }
.lg-btn.ghost:hover { border-color: var(--gold); color: var(--gold); filter: none; }
.lg-btn.big { font-size: 19px; padding: 12px 22px; }
.lg-btn:focus-visible, .lg-input:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.lg-link { background: none; border: 0; color: var(--gold); font: inherit; cursor: pointer; padding: 0; text-decoration: underline; }

/* ---------- the open screen ---------- */
.lg-intro { max-width: 900px; margin: 0 auto; padding: 32px 18px 48px; display: grid; gap: 26px; align-content: start; }
.lg-hero h2 { margin: 0 0 10px; font: 700 34px/1.08 var(--display); letter-spacing: .01em; }
.lg-hero h2 code { font-size: .62em; background: none; padding: 0; color: var(--gold); }
.lg-hero p { margin: 0 0 10px; color: var(--muted); max-width: 70ch; }
.lg-cta { margin: 18px 0 0 !important; }
.lg-fine { margin: 6px 0 0; font-size: 12.5px; color: var(--muted); }
.lg-dim { color: var(--muted); }

.lg-where { background: var(--surface); border: 1px solid var(--rule); border-left: 3px solid var(--gold); border-radius: 0; padding: 14px 16px; }
.lg-where h3 { margin: 0 0 10px; font: 600 20px/1 var(--display); color: var(--gold); }
.lg-where dl { margin: 0; display: grid; grid-template-columns: minmax(120px, 190px) 1fr; gap: 6px 14px; }
.lg-where dt { font-family: var(--display); font-size: 14px; color: var(--muted); padding-top: 3px; }
.lg-where dd { margin: 0; min-width: 0; }
@media (max-width: 620px) { .lg-where dl { grid-template-columns: 1fr; gap: 2px; } .lg-where dd { margin-bottom: 8px; } }

.lg-recent h3 { margin: 0 0 8px; font: 600 18px/1 var(--display); color: var(--ink); }
.lg-recent ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.lg-recent button[data-recent] { display: grid; width: 100%; text-align: left; gap: 2px; padding: 9px 12px; border-radius: 0;
  border: 1px solid var(--rule); background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; }
.lg-recent button[data-recent]:hover { border-color: var(--gold); }
.lg-recent small { color: var(--muted); font-family: var(--mono); font-size: 11px; }

/* ---------- report header ----------
   Once a log is open this is ONE line: the file name, a one-line fact strip, the follow controls and the
   buttons. The stat tiles and the parse report are behind the disclosure inside it, because at 1440x900
   every pixel they took came straight out of the view pane below (the lead's layout pass, 18 Sep 2026). */
.lg-report-page { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.lg-headbar { display: flex; align-items: flex-start; gap: 8px 14px; flex-wrap: wrap; padding: 6px 14px;
  border-bottom: 1px solid var(--rule); background: var(--surface); flex: 0 0 auto; }
.lg-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; flex: 1 1 380px; min-width: 0; }
.lg-h-line { display: flex; align-items: baseline; gap: 6px 12px; flex-wrap: wrap; min-width: 0; flex: 1 1 auto; }
.lg-h-facts { font-family: var(--mono); font-size: 11px; color: var(--muted); min-width: 0; overflow-wrap: anywhere; }
.lg-h-facts b { color: var(--ink); font-weight: 500; }
.lg-h-file { display: flex; align-items: baseline; gap: 7px; min-width: 0; max-width: 46ch; }
.lg-drawer-btn { display: none; flex: 0 0 auto; align-self: center; }
.lg-h-file b { font: 600 16px/1.2 var(--display); overflow-wrap: anywhere; }
.lg-h-file span { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.lg-h-stat-b { display: grid; }
.lg-h-stat-b > span { font-family: var(--display); font-size: 13px; color: var(--muted); }
.lg-h-stat-b b { font: 600 17px/1.15 var(--display); }
.lg-h-stat-b small { font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
.lg-h-prog { flex: 1 1 260px; display: grid; gap: 4px; min-width: 200px; }
.lg-h-bar { display: block; height: 6px; border-radius: 0; background: var(--surface-2); overflow: hidden; }
.lg-h-bar span { display: block; height: 100%; background: var(--gold); transition: width .12s linear; }
.lg-h-stat { font-family: var(--mono); font-size: 11px; color: var(--muted); }

/* The disclosure that holds everything the one-line header no longer shows. */
.lg-h-det { flex: 1 1 100%; order: 8; margin: 0; }
.lg-h-det > summary { cursor: pointer; font-family: var(--display); font-size: 13.5px; color: var(--muted); list-style: none; display: inline-flex; align-items: center; gap: 5px; }
.lg-h-det > summary::-webkit-details-marker { display: none; }
.lg-h-det > summary::before { content: ""; width: 0; height: 0; border-left: 5px solid currentColor;
  border-top: 4px solid transparent; border-bottom: 4px solid transparent; transition: transform .1s; }
.lg-h-det[open] > summary::before { transform: rotate(90deg); }
.lg-h-det > summary:hover { color: var(--gold); }
.lg-h-body { display: flex; flex-wrap: wrap; gap: 10px 22px; padding: 8px 0 2px; }

.lg-report { flex: 1 1 100%; order: 9; margin-top: 2px; }
.lg-report > summary { cursor: pointer; font-family: var(--display); font-size: 14px; color: var(--muted); }
.lg-report.warn > summary { color: var(--amber); }
.lg-report > summary i { font-style: normal; text-transform: none; letter-spacing: 0; }
.lg-report-b { margin-top: 8px; padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--rule); border-radius: 0; max-height: 340px; overflow: auto; }
.lg-report-b p { margin: 0 0 6px; font-size: 13px; }
.lg-report-l { margin: 0 0 10px; padding-left: 18px; font-size: 12.5px; color: var(--muted); }
.lg-report-l.cols { columns: 220px 4; padding-left: 16px; }
.lg-report-l code { font-size: 11.5px; }

/* ---------- two columns ---------- */
.lg-cols { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); }
.lg-side { border-right: 1px solid var(--rule); background: #0D1118; display: flex; flex-direction: column; min-height: 0; }
.lg-side-top { padding: 8px; border-bottom: 1px solid var(--rule); }
.lg-input { width: 100%; font: inherit; font-size: 13px; color: var(--ink); background: var(--surface-2); border: 1px solid var(--rule); border-radius: 0; padding: 6px 9px; min-width: 0; }
.lg-input.small { width: auto; max-width: 200px; font-size: 12px; padding: 4px 8px; }
.lg-keys { padding: 6px 10px; margin: 0; border-top: 1px solid var(--rule); font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em; }
.lg-main { min-width: 0; display: flex; flex-direction: column; min-height: 0; }

/* Under ~1000px the fight list is a drawer, not a column: two panes side by side leave the tables about
   500px and the first thing a reader sees is a horizontal scrollbar. The button lives in the header row
   and only exists at this width. */
@media (max-width: 1000px) {
  .lg-drawer-btn { display: inline-flex; }
  .lg-cols { grid-template-columns: minmax(0, 1fr); }
  .lg-side { display: none; }
  .lg-cols.side-open { grid-template-columns: minmax(230px, 34vw) minmax(0, 1fr); }
  .lg-cols.side-open .lg-side { display: flex; }
}
/* Narrow: drop the fixed-height two-pane app entirely and let the page scroll like a document. The panes
   below each other inside a 100vh flex column overlapped the footer on a phone. */
@media (max-width: 860px) {
  body, main, .lg-report-page, .lg-cols, .lg-main { display: block; min-height: 0; height: auto; }
  .lg-cols { grid-template-columns: 1fr; }
  .lg-cols.side-open { grid-template-columns: 1fr; }
  /* Still a drawer, not a column that has become a header: stacked above the tables it would otherwise
     push a screen and a half down the page. The button in the header row is what opens it. */
  .lg-side { display: none; border-right: 0; border-bottom: 1px solid var(--rule); }
  .lg-cols.side-open .lg-side { display: block; }
  .lg-fights { max-height: 46vh; overflow: auto; }
  .lg-view { overflow-x: auto; padding-bottom: 28px; }
  .lg-tbl th { position: static; }
}

/* ---------- fight list ---------- */
.lg-fights { flex: 1 1 auto; overflow: auto; padding: 6px; }
.lg-fl-empty { color: var(--muted); font-size: 13px; padding: 10px; margin: 0; }
.lg-fg { margin-bottom: 4px; }
.lg-fg-h { display: flex; align-items: baseline; gap: 6px; width: 100%; text-align: left; padding: 5px 6px; border: 0; border-radius: 0;
  background: transparent; color: var(--ink); font: inherit; cursor: pointer; }
.lg-fg-h:hover { background: var(--surface); }
.lg-fg-h[disabled] { cursor: default; opacity: 1; }
.lg-fg-caret { width: 0; height: 0; border-left: 5px solid var(--muted); border-top: 4px solid transparent; border-bottom: 4px solid transparent; transition: transform .1s; flex: 0 0 auto; }
.lg-fg.open .lg-fg-caret { transform: rotate(90deg); }
.lg-fg-h[disabled] .lg-fg-caret { visibility: hidden; }
.lg-fg-name { font: 600 15px/1.2 var(--display); letter-spacing: .02em; color: var(--gold); min-width: 0; overflow-wrap: anywhere; }
.lg-fg-sub { font-family: var(--mono); font-size: 10.5px; color: var(--muted); min-width: 0; }
.lg-fg-n { margin-left: auto; font-family: var(--mono); font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.lg-fg-list { margin: 0 0 2px; padding: 0 0 0 8px; list-style: none; display: grid; gap: 2px; }

/* Row grid: stripe | title+sub | numbers, with an optional boss-HP bar and a death count on a second line.
   Every child is placed explicitly — auto-placement put the numbers on top of the title. */
.lg-f { display: grid; grid-template-columns: 3px minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 8px; align-items: center;
  width: 100%; text-align: left; padding: 5px 7px; border: 1px solid transparent; border-radius: 0; background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; }
.lg-f:hover { border-color: var(--rule); background: var(--surface-2); }
.lg-f.on { border-color: var(--gold); background: #191a12; }
.lg-f-mark { grid-column: 1; grid-row: 1 / 3; width: 3px; height: 100%; min-height: 26px; border-radius: 2px; background: var(--rule); }
.lg-f.kill .lg-f-mark { background: var(--green); }
.lg-f.wipe .lg-f-mark { background: var(--red); }
.lg-f.fled .lg-f-mark { background: var(--amber); }
.lg-f-main { grid-column: 2; grid-row: 1; min-width: 0; display: grid; }
.lg-f-name { font-size: 13.5px; font-weight: 500; overflow-wrap: anywhere; }
.lg-f-sub { font-family: var(--mono); font-size: 10.5px; color: var(--muted); overflow-wrap: anywhere; }
.lg-f-out { font: 500 12.5px/1 var(--display); padding: 2px 4px; border-radius: 0; font-style: normal; vertical-align: 1px; color: var(--muted); border: 1px solid var(--rule); }
.lg-f-out.kill { color: var(--green); border-color: #244a28; }
.lg-f-out.wipe { color: var(--red); border-color: #4a2424; }
.lg-f-out.fled { color: var(--amber); border-color: #4a3c24; }
.lg-f-num { grid-column: 3; grid-row: 1; text-align: right; display: grid; }
.lg-f-dur { font-family: var(--mono); font-size: 12px; }
.lg-f-dps { font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
.lg-f-hp { grid-column: 2; grid-row: 2; position: relative; height: 4px; border-radius: 2px; background: #2a1c1c; overflow: hidden; margin: 3px 0 1px; }
.lg-f-hp span { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #7a2b2b, var(--red)); }
.lg-f-hp i { position: absolute; right: 2px; top: -1px; font: 500 9.5px/4px var(--mono); color: var(--ink); font-style: normal; }
.lg-f-deaths { grid-column: 3; grid-row: 2; text-align: right; font-family: var(--mono); font-size: 10.5px; color: var(--red); }

/* ---------- fight header ---------- */
.lg-fight-head { padding: 10px 14px 6px; border-bottom: 1px solid var(--rule); }
.lg-fight-head h2 { margin: 0 0 6px; font: 700 24px/1.1 var(--display); letter-spacing: .02em; overflow-wrap: anywhere; }
.lg-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.lg-chip { display: inline-flex; align-items: baseline; gap: 5px; padding: 2px 8px; border: 1px solid var(--rule); border-radius: 0; background: var(--surface); font-size: 12px; color: var(--muted); white-space: nowrap; }
.lg-chip b { font-family: var(--mono); font-weight: 500; color: var(--ink); }

/* ---------- timeline ----------
   Collapsed by default and short when open: the chart is a filter, not the reason the page exists, and at
   1440x900 it was 180 px of the ~285 px the view pane had left. */
.lg-tl-wrap { flex: 0 0 auto; border-bottom: 1px solid var(--rule); }
.lg-tl-toggle { display: flex; align-items: center; gap: 7px; width: 100%; text-align: left; padding: 4px 14px;
  border: 0; background: transparent; color: var(--muted); font-family: var(--display); font-size: 10.5px;
  cursor: pointer; }
.lg-tl-toggle:hover { color: var(--gold); }
.lg-tl-toggle i { font-style: normal; text-transform: none; letter-spacing: 0; color: #5a6376; }
.lg-tl-toggle b { font-weight: 500; color: var(--gold); text-transform: none; letter-spacing: 0; }
.lg-tl-caret { width: 0; height: 0; border-left: 5px solid currentColor; border-top: 4px solid transparent;
  border-bottom: 4px solid transparent; transition: transform .1s; flex: 0 0 auto; }
.lg-tl-toggle[aria-expanded="true"] .lg-tl-caret { transform: rotate(90deg); }
.lg-tl-wrap #lgTimeline[hidden] { display: none !important; }
.lg-timeline { position: relative; padding: 2px 14px 2px; }
.lg-tl-canvas { display: block; width: 100%; cursor: crosshair; touch-action: none; }
.lg-tl-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 2px 0 0 46px; font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
.lg-tl-legend span { display: inline-flex; align-items: center; gap: 5px; }
.lg-tl-legend i { width: 10px; height: 3px; border-radius: 2px; display: inline-block; }
.lg-tl-legend i.boss { background: repeating-linear-gradient(90deg, var(--blue) 0 4px, transparent 4px 7px); }
.lg-tl-legend i.death { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 6px solid var(--red); border-radius: 0; }
.lg-tl-hint { margin: 2px 0 6px 46px; font-family: var(--mono); font-size: 10.5px; color: #6C7688; }
.lg-tl-tip { position: absolute; top: 10px; pointer-events: none; display: grid; gap: 1px; padding: 5px 8px; border: 1px solid var(--rule); border-radius: 0;
  background: rgba(11,14,20,.95); font-family: var(--mono); font-size: 11px; color: var(--ink); white-space: nowrap; z-index: 3; }
.lg-tl-tip span { display: flex; align-items: center; gap: 5px; color: var(--muted); }
.lg-tl-tip b { color: var(--ink); }
.lg-tl-tip i { width: 8px; height: 3px; border-radius: 2px; }

/* ---------- tabs and the view ----------
   One row, always. Eighteen tabs wrapped to two rows and took another 40 px off the pane; they scroll
   sideways instead, with the keyboard's 1-9 still reaching the first nine. */
.lg-tabs { display: flex; flex-wrap: nowrap; gap: 2px; padding: 5px 14px 0; border-bottom: 1px solid var(--rule);
  overflow-x: auto; overflow-y: hidden; flex: 0 0 auto; overscroll-behavior-x: contain;
  /* No scrollbar at all. A styled one still draws its *track* as a bright bar under the tabs on
     macOS/Chromium, and the strip already has two better affordances: renderTabs() scrolls the chosen tab
     into view, and 1-9 reach the first nine. Wheel and trackpad still scroll it. */
  scrollbar-width: none; -ms-overflow-style: none; }
.lg-tabs::-webkit-scrollbar { height: 0; width: 0; display: none; }
.lg-tabs button { position: relative; flex: 0 0 auto; white-space: nowrap; font: 600 14px/1 var(--display); letter-spacing: .03em; color: var(--muted); background: transparent;
  border: 1px solid transparent; border-bottom: 0; border-radius: 0 0 0; padding: 6px 10px 7px; cursor: pointer; }
.lg-tabs button:hover { color: var(--ink); }
.lg-tabs button[aria-selected="true"] { color: var(--gold); background: var(--surface); border-color: var(--rule); margin-bottom: -1px; padding-bottom: 8px; }
/* A view that cannot answer on this log keeps its place and says why on hover, rather than vanishing and
   leaving a reader wondering where "Gear" went. */
.lg-tabs button[disabled] { color: #4A5364; cursor: not-allowed; text-decoration: line-through; text-decoration-color: #3A4355; }
.lg-tabs button[disabled]:hover { color: #5D687C; }
.lg-tabs button i { font: 500 9px/1 var(--mono); font-style: normal; color: #5a6376; margin-left: 5px; vertical-align: 2px; }
.lg-viewbar { display: flex; align-items: center; gap: 10px; padding: 5px 14px; flex: 0 0 auto; flex-wrap: wrap; }
.lg-view-info { display: inline-flex; align-items: center; gap: 4px 14px; flex-wrap: wrap;
  font-family: var(--display); font-size: 10.5px; color: var(--muted); }
/* The scope toggle: "your group · 12 bystanders hidden — show". */
.lg-scope { display: inline-flex; align-items: center; gap: 6px; font-family: var(--display); font-size: 10.5px;
  color: var(--muted); }
.lg-scope b { color: var(--ink); font-weight: 500; }
.lg-scope button { font: 500 13.5px/1 var(--display); color: var(--gold); background: none; border: 1px solid var(--rule); border-radius: 0; padding: 2px 8px; cursor: pointer; }
.lg-scope button:hover { border-color: var(--gold); }
.lg-view { flex: 1 1 auto; overflow: auto; padding: 0 14px 20px; min-height: 0; }
.lg-wait, .lg-err { color: var(--muted); font-size: 13px; padding: 14px 0; }
.lg-err { color: var(--amber); }

/* ---------- the generic table ---------- */
.lg-tbl { border-collapse: collapse; width: 100%; font-size: 13px; }
.lg-tbl th { position: sticky; top: 0; z-index: 2; text-align: left; padding: 5px 8px; background: var(--ground); border-bottom: 1px solid var(--rule);
  font-family: var(--display); font-size: 10px; font-weight: 500; color: var(--muted); cursor: pointer; white-space: nowrap; }
.lg-tbl th:hover { color: var(--ink); }
.lg-tbl th.on { color: var(--gold); }
.lg-tbl th i { font-style: normal; margin-left: 3px; }
.lg-tbl th.num, .lg-tbl td.num { text-align: right; }
.lg-tbl th.lg-rank-h, .lg-tbl td.lg-rank-c { width: 26px; text-align: right; padding-right: 4px; color: #5a6376; font-family: var(--mono); font-size: 10.5px; cursor: default; }
.lg-tbl td { position: relative; padding: 3px 8px; border-bottom: 1px solid #1A2130; vertical-align: middle; }
/* The label column holds an 18px icon and then a name. Left to wrap it put the name under its own icon and
   made every row three lines tall — worst on the Query tab, where `spell` is one column of many. It gets a
   minimum width and a cap, and a long name wraps inside the cell. */
.lg-tbl td.lg-lab, .lg-tbl td.lg-ref { min-width: 12ch; max-width: 34ch; overflow-wrap: anywhere; }
.lg-tbl td.lg-lab .lg-cell, .lg-tbl td.lg-ref .lg-cell { display: inline-flex; align-items: center; gap: 0; min-width: 0; max-width: 100%; }
.lg-tbl td.lg-lab .lg-nm, .lg-tbl td.lg-ref .lg-nm { overflow-wrap: anywhere; }
.lg-tbl .lg-ic { flex: 0 0 auto; }
.lg-tbl td.dim, .lg-tbl th.dim { color: var(--muted); }
.lg-tbl tbody tr.lg-row { cursor: default; }
.lg-tbl tbody tr.has-kids { cursor: pointer; }
.lg-tbl tbody tr.lg-row:hover td { background: rgba(255,255,255,.028); }
.lg-tbl .lg-cell { position: relative; z-index: 1; }
.lg-bar { position: absolute; left: 0; top: 2px; bottom: 2px; border-radius: 2px; opacity: .2; z-index: 0; }
.lg-bar.kid { background: var(--muted); opacity: .13; }
.lg-tbl td.lg-lab { padding-left: 20px; }
.lg-caret { position: absolute; left: 7px; top: 50%; margin-top: -4px; width: 0; height: 0; border-left: 5px solid var(--muted); border-top: 4px solid transparent; border-bottom: 4px solid transparent; }
tr.open .lg-caret { transform: rotate(90deg); }
.lg-nm { font-weight: 500; }
.lg-realm { color: #5a6376; font-family: var(--mono); font-size: 10px; margin-left: 5px; }
.lg-rank { font-style: normal; color: var(--muted); font-family: var(--mono); font-size: 10px; }
.lg-from { color: var(--muted); font-size: 11.5px; margin-left: 6px; }
.lg-ic { width: 18px; height: 18px; border-radius: 0; vertical-align: -4px; margin-right: 6px; background: var(--surface-2); }
.lg-kid td { background: #0E131B; border-bottom-color: #161D29; }
.lg-kid td.lg-lab { padding-left: 34px; }
.lg-kid.neg .lg-cell b { color: var(--red); }
.lg-zero { color: #454F60; }
.lg-empty { color: var(--muted); padding: 14px 8px !important; }
.lg-tbl tfoot td { border-bottom: 0; padding-top: 8px; font-size: 11.5px; color: var(--muted); }
.lg-prov { color: var(--amber); font-weight: 500; }

/* ---------- death recap (ui/deaths.js) ---------- */
.lg-death { border: 1px solid var(--rule); border-radius: 0; background: var(--surface); margin: 6px 0; overflow: hidden; }
.lg-death.open { border-color: var(--red); }
.lg-d-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; width: 100%; text-align: left;
  padding: 7px 10px; border: 0; background: transparent; color: var(--ink); font: inherit; cursor: pointer; }
.lg-d-head:hover { background: var(--surface-2); }
.lg-d-caret { width: 0; height: 0; border-left: 5px solid var(--muted); border-top: 4px solid transparent; border-bottom: 4px solid transparent; align-self: center; }
.lg-death.open .lg-d-caret { transform: rotate(90deg); }
.lg-d-at { font-family: var(--mono); font-size: 12px; color: var(--red); }
.lg-d-who { font-weight: 600; }
.lg-d-blow { color: var(--muted); font-size: 13px; min-width: 0; }
.lg-d-blow b { color: var(--ink); }
.lg-d-blow i { color: var(--amber); font-style: normal; }
.lg-d-nums { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--muted); white-space: nowrap; }
.lg-d-nums b { color: var(--ink); font-weight: 500; }
.lg-d-nums i { color: var(--amber); font-style: normal; }
.lg-d-body { padding: 0 10px 8px; }
.lg-d-tbl td, .lg-d-tbl th { padding: 2px 8px; }
.lg-d-tbl th { position: static; background: transparent; cursor: default; }
.lg-d-dmg td.num b { color: var(--red); }
.lg-d-heal td.num b { color: var(--green); }
.lg-d-miss td.num b { color: var(--muted); font-weight: 400; }
.lg-d-hp small { color: var(--muted); }
.lg-d-hp i { color: var(--muted); font-style: normal; font-family: var(--mono); font-size: 10.5px; }
.lg-d-tags { color: var(--muted); font-family: var(--mono); font-size: 10.5px; }
.lg-d-sp { white-space: nowrap; }
.lg-d-used { margin: 6px 0 0; font-size: 12.5px; color: var(--muted); }
.lg-d-used b { color: var(--ink); }
.lg-d-used i { font-style: normal; font-family: var(--mono); font-size: 10.5px; }

/* ---------- the leveling session (ui/session.js) ---------- */
.lg-ses { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 2px 0 20px; }
/* A grid item's automatic minimum is its content, and the route canvas carries an explicit width: without
   these the canvas holds the whole view at the width it was first painted at when the pane narrows. */
.lg-ses > * { min-width: 0; }
.lg-ses-canvas-wrap { min-width: 0; max-width: 100%; }
.lg-ses-card { border: 1px solid var(--rule); border-radius: 0; background: var(--surface); padding: 12px 14px; }
.lg-ses-card h3 { margin: 0 0 8px; font: 600 19px/1 var(--display); letter-spacing: .02em; color: var(--gold); }
.lg-ses-card h4 { margin: 14px 0 6px; font: 600 15px/1 var(--display); letter-spacing: .02em; color: var(--ink); }
.lg-ses-card > p { margin: 0 0 6px; }
.lg-ses .lg-fine { margin: 6px 0 0; max-width: 92ch; }

.lg-ses-run { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 12px; border: 1px solid var(--rule); border-radius: 0; background: var(--surface); }
.lg-ses-run .lg-h-bar { flex: 1 1 200px; }
.lg-ses-offer { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border: 1px solid var(--rule); border-left: 3px solid var(--gold); border-radius: 0; background: var(--surface); }
.lg-ses-offer p { margin: 0; flex: 1 1 320px; color: var(--muted); max-width: 80ch; }
.lg-ses-done { margin: 0; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.lg-btn.small { font-size: 13px; padding: 4px 10px; }

.lg-ses-hero { display: grid; gap: 12px; border: 1px solid var(--rule); border-radius: 0; background: var(--surface); padding: 14px; }
.lg-ses-who h2 { margin: 0; font: 700 30px/1.05 var(--display); letter-spacing: .01em; overflow-wrap: anywhere; }
.lg-ses-who h2 .lg-realm { font: 400 13px/1 var(--mono); color: var(--muted); margin-left: 8px; }
.lg-ses-cls, .lg-ses-lvl, .lg-ses-ding, .lg-ses-when { margin: 4px 0 0; }
.lg-ses-cls i, .lg-ses-lvl i { font-style: normal; color: var(--muted); font-size: 12.5px; }
.lg-ses-lvl b { font: 600 17px/1 var(--display); color: var(--gold); }
.lg-ses-when { font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.lg-tag { font: 500 12.5px/1 var(--display); padding: 2px 5px; border-radius: 0; border: 1px solid var(--rule); color: var(--amber); }
.lg-tag.bound { color: var(--blue); }
/* the chat log turns the level track from an inference into arithmetic, so it gets the confident colour */
.lg-tag.exact { color: var(--green); border-color: #2c4a30; }
.lg-ses-ding.exact b { color: var(--green); }
.lg-ses-chat code { font-family: var(--mono); font-size: 11.5px; color: var(--gold); }
.lg-ses-xp h4 { margin: 14px 0 4px; font: 600 13px/1.2 var(--display); letter-spacing: .02em; }
.lg-gap-up { color: var(--amber); }
.lg-ses-ups { margin: 8px 0 0; }
.lg-ses-ups > summary { cursor: pointer; font-family: var(--mono); font-size: 11px; letter-spacing: .05em; color: var(--muted); }
.lg-conf.ok { color: var(--green); }
.lg-conf.meh { color: var(--muted); }

.lg-ses-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.lg-ses-tile { display: grid; gap: 1px; padding: 8px 10px; border: 1px solid var(--rule); border-radius: 0; background: var(--surface-2); }
.lg-ses-tile > span { font-family: var(--display); font-size: 13px; color: var(--muted); }
.lg-ses-tile b { font: 600 22px/1.1 var(--display); }
.lg-ses-tile small { font-family: var(--mono); font-size: 10.5px; color: var(--muted); }

.lg-ses-bar { display: flex; height: 22px; border-radius: 0; overflow: hidden; background: var(--surface-2); }
.lg-ses-bar span { display: block; height: 100%; }
.lg-ses-legend { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 2px 14px; }
.lg-ses-legend.flat { grid-template-columns: repeat(auto-fit, minmax(90px, max-content)); }
.lg-ses-legend li { display: flex; align-items: baseline; gap: 6px; font-size: 12.5px; }
.lg-ses-legend i { width: 9px; height: 9px; border-radius: 2px; flex: 0 0 auto; }
.lg-ses-legend i.x { width: 0; height: 0; border: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid var(--red); }
.lg-ses-legend b { margin-left: auto; font-family: var(--mono); font-weight: 500; font-size: 12px; }
.lg-ses-legend small { font-family: var(--mono); font-size: 10.5px; color: var(--muted); min-width: 40px; text-align: right; }
.lg-ses-legend .tot { border-top: 1px solid var(--rule); padding-top: 3px; color: var(--muted); }

.lg-ses-maps { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.lg-ses-mapbtn { display: grid; gap: 1px; text-align: left; padding: 5px 10px; border: 1px solid var(--rule); border-radius: 0;
  background: var(--surface-2); color: var(--ink); font: 500 13px/1.2 var(--body); cursor: pointer; }
.lg-ses-mapbtn:hover { border-color: var(--gold); }
.lg-ses-mapbtn.on { border-color: var(--gold); background: #191a12; color: var(--gold); }
.lg-ses-mapbtn small { font-family: var(--mono); font-size: 10px; color: var(--muted); }
.lg-ses-canvas-wrap { position: relative; }
.lg-ses-canvas { display: block; width: 100%; border-radius: 0; }
.lg-ses-tip { position: absolute; z-index: 3; pointer-events: none; display: grid; gap: 1px; padding: 5px 8px; max-width: 220px;
  border: 1px solid var(--rule); border-radius: 0; background: var(--surface); font-size: 12px; box-shadow: 0 4px 14px rgba(0,0,0,.4); }
.lg-ses-tip span { font-family: var(--mono); font-size: 10.5px; color: var(--muted); }

.lg-ses-mobs tbody tr { cursor: pointer; }
.lg-ses-mobs tbody tr.on { outline: 1px solid var(--gold); outline-offset: -1px; }
.lg-ses-card .lg-tbl b.bad { color: var(--red); }
.lg-ses-ab { font-size: 11.5px; color: var(--muted); }
.lg-ses-ab span { display: inline-block; margin-right: 10px; white-space: nowrap; }
.lg-ses-ab b { color: var(--ink); font-weight: 500; }
.lg-ses-ab i { font-style: normal; margin-left: 4px; font-family: var(--mono); font-size: 10px; }
.lg-ses-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px 22px; }
.lg-ses-two > div { min-width: 0; }

.lg-ses-death { border-bottom: 1px solid var(--rule); }
.lg-ses-death:last-child { border-bottom: 0; }
.lg-ses-dh { display: flex; align-items: baseline; gap: 8px; width: 100%; text-align: left; padding: 6px 4px; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.lg-ses-dh:hover { background: var(--surface-2); }
.lg-ses-death.open .lg-d-caret { transform: rotate(90deg); }
.lg-ses-dh .lg-d-who i { font-style: normal; color: var(--gold); font-size: 11px; }
.lg-tbl.small td, .lg-tbl.small th { padding: 2px 8px; font-size: 12px; }
.lg-tbl.small th { position: static; }
.lg-tbl.small i { font-style: normal; color: var(--muted); font-family: var(--mono); font-size: 10.5px; }

.lg-fl-chip { margin: 2px 4px 6px; font-size: 12px; color: var(--muted); }
.lg-fl-chip b { color: var(--ink); }

/* ---------- drop overlay, toast, footer ---------- */
.lg-drop { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: rgba(11,14,20,.9); backdrop-filter: blur(2px); }
.lg-drop > div { display: grid; gap: 6px; justify-items: center; padding: 40px 60px; border: 2px solid var(--gold); border-radius: 0; background: var(--surface); }
.lg-drop b { font: 700 28px/1 var(--display); color: var(--gold); }
.lg-drop span { color: var(--muted); }
.lg-toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 95; max-width: min(560px, calc(100vw - 32px));
  padding: 9px 14px; border: 1px solid var(--amber); border-radius: 0; background: var(--surface); color: var(--ink); font-size: 13px; }
.lg-foot { flex: 0 0 auto; padding: 10px 16px; border-top: 1px solid var(--rule); color: var(--muted); font-size: 12px; }
.lg-foot p { margin: 0; }
.lg-noscript { padding: 20px; color: var(--amber); }

@media (max-width: 620px) {
  .lg-top { flex-wrap: wrap; gap: 8px; }
  .lg-privacy { order: 3; width: 100%; margin: 0; text-align: center; }
  .lg-hero h2 { font-size: 26px; }
  .lg-intro { padding: 20px 14px 32px; }
}

/* ==================================================================================================
   Query, live follow, the portable report and the history drawer.
   Added with the page's four new files (ui/query.js, ui/live.js, ui/export.js, ui/history.js).
   ================================================================================================== */

/* ---------- the "that is not a log" message on the open screen ---------- */
.lg-open-err p { margin: 0; padding: 10px 14px; border: 1px solid var(--red); border-left-width: 3px; border-radius: 0;
  background: #1a1112; color: var(--ink); }
.lg-open-err b { color: var(--red); }
.lg-open-err span { display: block; margin-top: 4px; color: var(--muted); font-size: 12.5px; }
.lg-net { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.lg-net li { color: var(--muted); }
.lg-net b { color: var(--ink); }

/* ---------- header actions, imported banner, live bar ---------- */
.lg-h-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.lg-h-others { flex-basis: 100%; }
.lg-h-others b { color: var(--ink); }
.lg-x-banner { flex-basis: 100%; margin-top: 6px; padding: 8px 12px; border: 1px solid var(--blue); border-left-width: 3px;
  border-radius: 0; background: #101722; font-size: 12.5px; color: var(--muted); }
.lg-x-banner b { color: var(--blue); }
.lg-x-banner i { color: var(--amber); font-style: normal; }

.lg-livebar { padding: 6px 16px; border-bottom: 1px solid var(--rule); background: var(--surface); }
.lg-live { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); }
.lg-live b { color: var(--ink); font: 600 15px/1 var(--display); letter-spacing: .04em; }
.lg-live.on b { color: var(--green); }
.lg-live-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 rgba(95,208,104,.6);
  animation: lgPulse 2s infinite; }
.lg-live-dot.stalled { background: var(--amber); animation: none; }
@keyframes lgPulse { 70% { box-shadow: 0 0 0 7px rgba(95,208,104,0); } 100% { box-shadow: 0 0 0 0 rgba(95,208,104,0); } }
@media (prefers-reduced-motion: reduce) { .lg-live-dot { animation: none; } }
.lg-live-note { color: var(--amber); }
.lg-live-err { color: var(--red); }
.lg-chip.live b { color: var(--green); }
.lg-chip.pb b { color: var(--blue); }
.lg-pb { font-style: normal; margin-left: 6px; font-family: var(--display); font-size: 13.5px;
  color: var(--amber); border: 1px solid #4a3a16; border-radius: 0; padding: 1px 6px; }

/* ---------- a panel that drops out of the header (export, history) ---------- */
.lg-panel { border-bottom: 1px solid var(--rule); background: var(--surface-2); padding: 14px 16px; }
.lg-x, .lg-hist { max-width: 860px; }
.lg-x-h, .lg-hist-h { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.lg-x-h h3, .lg-hist-h h3 { margin: 0; font: 600 21px/1 var(--display); color: var(--gold); flex: 1 1 auto; }
.lg-x-lede { margin: 0 0 12px; color: var(--muted); max-width: 78ch; }
.lg-x-f { border: 1px solid var(--rule); border-radius: 0; margin: 0 0 10px; padding: 8px 12px 10px; }
.lg-x-f legend { font-family: var(--display); font-size: 13.5px; color: var(--muted); padding: 0 4px; }
.lg-x-o { display: flex; gap: 9px; align-items: flex-start; padding: 4px 0; cursor: pointer; }
.lg-x-o input { margin-top: 3px; accent-color: var(--gold); }
.lg-x-o b { font-weight: 600; }
.lg-x-o small { display: block; color: var(--muted); font-size: 12px; }
.lg-x-est { margin: 10px 0; color: var(--muted); }
.lg-x-est b { color: var(--ink); }
.lg-x-go { margin: 12px 0 0; }
.lg-x-done { margin: 12px 0 0; padding: 10px 12px; border: 1px solid var(--green); border-radius: 0; background: #101a12; }
.lg-x-done b { color: var(--green); }

.lg-hist-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); cursor: pointer; }
.lg-hist-toggle input { accent-color: var(--gold); }
.lg-hist-l { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; max-height: 44vh; overflow: auto; }
.lg-hist-l > li.on .lg-hist-b { border-color: var(--gold); }
.lg-hist-b { display: grid; gap: 2px; width: 100%; text-align: left; padding: 7px 10px; border-radius: 0;
  border: 1px solid var(--rule); background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; }
.lg-hist-b:hover { border-color: var(--gold); }
.lg-hist-b small { color: var(--muted); font-family: var(--mono); font-size: 11px; }
.lg-hist-e { margin: 4px 0 0 14px; padding: 0; list-style: none; font-size: 12px; color: var(--muted); display: grid; gap: 2px; }
.lg-hist-e i { font-style: normal; color: var(--gold); }

/* ---------- a tab that is a pinned query ---------- */
.lg-tabs button.pin { border-style: solid; }
.lg-more { margin: 12px 0 0; color: var(--muted); }
.lg-more .lg-btn { margin-left: 8px; }
.lg-empty { margin: 16px 0; color: var(--muted); }

/* ---------- the Query tab ---------- */
.lg-q { display: grid; gap: 10px; }
.lg-q-bar { display: flex; gap: 8px; align-items: flex-start; }
.lg-q-in { position: relative; flex: 1 1 auto; min-width: 0; }
.lg-q-input { width: 100%; padding: 9px 12px; border-radius: 0; border: 1px solid var(--rule); background: var(--ground);
  color: var(--ink); font-family: var(--mono); font-size: 13px; }
.lg-q-input:focus { border-color: var(--gold); outline: none; }
.lg-q-pop { position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 3px); margin: 0; padding: 4px; list-style: none;
  max-height: 46vh; overflow: auto; border: 1px solid var(--gold); border-radius: 0; background: var(--surface);
  box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.lg-q-pop li { display: flex; gap: 8px; align-items: baseline; padding: 4px 8px; border-radius: 0; cursor: pointer; }
.lg-q-pop li.on { background: var(--gold-soft); }
.lg-q-pop b { font-family: var(--mono); font-size: 12.5px; font-weight: 500; color: var(--ink); }
.lg-q-pop i { font-style: normal; font-family: var(--display); font-size: 13px; color: var(--gold); }
.lg-q-pop span { color: var(--muted); font-size: 12px; margin-left: auto; text-align: right; }
.lg-q-pin.on { border-color: var(--gold); color: var(--gold); }

.lg-q-saved { display: grid; gap: 4px; }
.lg-q-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.lg-q-lab { font-family: var(--display); font-size: 13px; color: var(--muted); }
.lg-q-chip { display: inline-flex; align-items: center; border: 1px solid var(--rule); border-radius: 0; background: var(--surface); }
.lg-q-chip.on { border-color: var(--gold); }
.lg-q-chip.dim { opacity: .75; }
.lg-q-chip button { border: 0; background: none; color: var(--ink); font: inherit; font-size: 12px; padding: 3px 10px; cursor: pointer; }
.lg-q-chip button.x { padding-left: 0; padding-right: 8px; color: var(--muted); }
.lg-q-chip button:hover { color: var(--gold); }

.lg-q-err { border: 1px solid var(--red); border-left-width: 3px; border-radius: 0; background: #1a1112; padding: 8px 12px; }
.lg-q-e + .lg-q-e { margin-top: 8px; border-top: 1px solid var(--rule); padding-top: 8px; }
.lg-q-caret { margin: 0; font-family: var(--mono); font-size: 12.5px; line-height: 1.35; overflow-x: auto; }
.lg-q-caret code { background: none; padding: 0; display: block; white-space: pre; }
.lg-q-caret code.mark { color: var(--red); }
.lg-q-e p { margin: 4px 0 0; font-size: 12.5px; }
.lg-q-e b { color: var(--red); }
.lg-q-e span { color: var(--muted); }

.lg-q-stat { margin: 0; font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.lg-q-notes ul { margin: 0; padding-left: 18px; color: var(--amber); font-size: 12.5px; display: grid; gap: 2px; }

.lg-q-drawer { border: 1px solid var(--rule); border-radius: 0; background: var(--surface); padding: 10px 12px; }
.lg-q-drawer h4 { margin: 0 0 8px; font: 600 17px/1 var(--display); color: var(--gold); }
.lg-q-exlist { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.lg-q-exlist button { display: grid; gap: 2px; width: 100%; text-align: left; padding: 7px 10px; border-radius: 0;
  border: 1px solid var(--rule); background: var(--ground); color: var(--ink); font: inherit; cursor: pointer; }
.lg-q-exlist button:hover { border-color: var(--gold); }
.lg-q-exlist code { background: none; padding: 0; color: var(--gold); font-size: 12px; overflow-wrap: anywhere; }
.lg-q-exlist span { color: var(--muted); font-size: 12px; }
.lg-q-fields { margin-top: 10px; }
.lg-q-fields summary { cursor: pointer; color: var(--muted); font-size: 12.5px; }

.lg-q-chart { display: grid; gap: 6px; }
.lg-q-chart canvas { max-width: 100%; border: 1px solid var(--rule); border-radius: 0; background: var(--ground); }
.lg-q-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.lg-q-legend i { display: inline-block; width: 10px; height: 3px; border-radius: 2px; margin-right: 5px; vertical-align: middle; }

@media (max-width: 620px) {
  .lg-q-bar { flex-wrap: wrap; }
  .lg-panel { padding: 10px 12px; }
}

/* ---------- the Session's Spell check card (scorecard row 29, whole log) ---------- */
.lg-ses-spell .lg-tbl { margin-top: 8px; }
.lg-ses-spell .lg-tbl td { vertical-align: top; }
.lg-ok { color: var(--green); }
.lg-ses-spell .lg-ses-ab i { color: var(--amber); }