/* Loot Editor (www.acdreamweave.com/tools/loot). Uses the tokens from market.css. No inline styles
   anywhere: the CSP allows style-src 'self' only. The list positions its rows through CSSOM writes
   in script, and --le-row-height below must equal ROW_HEIGHT in ui/windowing.ts (a test checks). */

/* The three-pane editor needs more room than the 960px tools column. */
.tools-body main:has(.le-app) { max-width: 1480px; }

.le-app {
    --le-row-height: 36px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.le-app button:focus-visible,
.le-app a:focus-visible,
.le-viewport:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

.le-muted { color: var(--muted); }
.le-mono { font-family: ui-monospace, Consolas, monospace; font-size: 13px; }

/* ---- buttons ---- */

.le-btn {
    min-height: 34px;
    padding: 4px 12px;
    background: var(--input);
    border: 1px solid var(--input-border);
    border-radius: 6px;
    color: var(--text);
    font: inherit;
    font-size: 14px;
    cursor: pointer;
}

.le-btn:hover:not(:disabled) { border-color: var(--gold-border); background: var(--gold-tint-2); }
.le-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.le-btn-primary { border-color: var(--gold-border); color: var(--gold); }
.le-btn-quiet { background: transparent; border-color: transparent; color: var(--text-2); }
.le-btn-danger { border-color: var(--err); color: var(--err); }
.le-btn-danger:hover:not(:disabled) { border-color: var(--err); color: var(--err); }

/* ---- toolbar and document line ---- */

.le-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: var(--panel);
    border: 1px solid var(--hairline);
    border-radius: 8px;
}

.le-sep { width: 1px; align-self: stretch; margin: 0 4px; background: var(--hairline); }

.le-docline { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.le-docname { margin: 0; font-size: 22px; color: var(--text); overflow-wrap: anywhere; }

.le-dirty {
    padding: 2px 8px;
    border: 1px solid var(--warn);
    border-radius: 999px;
    color: var(--warn);
    font-size: 13px;
}

.le-diagbadge { margin-left: auto; }
.le-diagbadge-error:not(:disabled) { border-color: var(--err); color: var(--err); }
.le-diagbadge-warning:not(:disabled) { border-color: var(--warn); color: var(--warn); }

/* ---- banners and panels ---- */

.le-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--gold-tint);
    border: 1px solid var(--gold-border);
    border-radius: 8px;
}

.le-banner-text { flex: 1 1 320px; }
.le-notice-error, .le-confirm { border-color: var(--err); }
.le-notice-success { border-color: var(--ok); }
.le-readonly { border-color: var(--warn); }

.le-recovered-list { margin: 8px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.le-recovered-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.le-recovered-name { font-weight: 600; }

.le-panel {
    padding: 12px;
    background: var(--panel);
    border: 1px solid var(--hairline);
    border-radius: 8px;
}

.le-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.le-diag-list, .le-folder-list { margin: 8px 0 0; padding: 0; list-style: none; max-height: 240px; overflow: auto; }
.le-folder-list { display: flex; flex-wrap: wrap; gap: 6px; }
.le-diag { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; padding: 4px 0; border-top: 1px solid var(--rule); }
.le-diag-sev { min-width: 64px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; }
.le-diag-error .le-diag-sev { color: var(--err); }
.le-diag-warning .le-diag-sev { color: var(--warn); }
.le-diag-info .le-diag-sev { color: var(--muted); }
.le-diag-text { flex: 1 1 280px; }

/* ---- layout ---- */

.le-body {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 12px;
    height: calc(100vh - 260px);
    min-height: 460px;
}

.le-tree, .le-list, .le-detail {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    background: var(--panel);
    border: 1px solid var(--hairline);
    border-radius: 8px;
}

.le-tree, .le-detail { padding: 12px; overflow: auto; }
.le-pane-title { margin: 0 0 8px; font-size: 18px; color: var(--gold); }

@media (max-width: 1100px) {
    .le-body { grid-template-columns: 200px minmax(0, 1fr); height: auto; }
    .le-list { height: 70vh; min-height: 420px; }
    .le-detail { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
    .le-body { grid-template-columns: minmax(0, 1fr); }
    .le-tree { max-height: 220px; }
}

/* ---- section tree ---- */

.le-tree-list { margin: 0; padding: 0; list-style: none; }
.le-tree-item { display: flex; align-items: stretch; gap: 2px; }
.le-tree-depth-1 { padding-left: 18px; }

.le-twisty, .le-twisty-gap { flex: 0 0 22px; }
.le-twisty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-2);
    font: 600 15px var(--body);
    cursor: pointer;
    user-select: none;
}

.le-node {
    display: flex;
    flex: 1 1 auto;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
    padding: 5px 8px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--text);
    font: inherit;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
}

.le-node:hover { background: var(--gold-tint); }
.le-node.is-active { border-color: var(--gold-border); background: var(--gold-tint-2); }
.le-node-pre { width: 100%; color: var(--text-2); }
.le-node-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.le-node-count { flex: 0 0 auto; color: var(--muted); font-size: 12px; }

/* ---- rule list ---- */

.le-listbar {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--hairline);
}

/* ---- rule list toolbar: labelled clusters (Create / Edit / Arrange), count on its own line ---- */
.le-listbar { gap: 4px 16px; }
.le-count { flex: 1 1 auto; color: var(--text-2); font-size: 13px; }
.le-countrow { display: flex; flex: 0 0 100%; align-items: center; justify-content: space-between; gap: 12px; }
.le-spacer-toggle { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 6px; color: var(--text-2); font-size: 13px; cursor: pointer; }

.le-cluster { display: flex; flex: 0 1 auto; min-width: 0; align-items: center; gap: 6px; }
.le-cluster-label { flex: 0 0 auto; color: var(--muted); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.le-cluster-btns { display: flex; flex: 0 1 auto; min-width: 0; flex-wrap: wrap; gap: 6px; }
/* Compact buttons here so three clusters fit the narrow list pane without growing the toolbar. */
.le-listbar .le-btn { min-height: 28px; padding: 2px 9px; font-size: 13px; }

.le-viewport {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.le-sizer { position: relative; width: 100%; }
.le-rows { position: absolute; top: 0; left: 0; right: 0; }
.le-empty { margin: 0; padding: 16px; color: var(--muted); }

.le-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
    height: var(--le-row-height);
    padding: 0 10px 0 4px;
    border-bottom: 1px solid var(--rule);
    cursor: default;
    user-select: none;
    white-space: nowrap;
}

/* ---- row indentation: the whole row shifts right by its level (rowIndentLevel in indent.ts, capped at 8).
   Fixed height is untouched. Each level also draws a faint vertical guide through the shifted gutter. ---- */
.le-row { --le-indent-step: 16px; }
.le-row.le-ind::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 4px;
    width: calc(var(--le-indent) * var(--le-indent-step));
    background-image: repeating-linear-gradient(to right, var(--hairline) 0, var(--hairline) 1px, transparent 1px, transparent var(--le-indent-step));
    pointer-events: none;
}
.le-ind-1 { --le-indent: 1; }
.le-ind-2 { --le-indent: 2; }
.le-ind-3 { --le-indent: 3; }
.le-ind-4 { --le-indent: 4; }
.le-ind-5 { --le-indent: 5; }
.le-ind-6 { --le-indent: 6; }
.le-ind-7 { --le-indent: 7; }
.le-ind-8 { --le-indent: 8; }
.le-row.le-ind { padding-left: calc(4px + var(--le-indent) * var(--le-indent-step)); }

.le-row:hover { background: var(--gold-tint); }
.le-row.is-selected { background: var(--gold-tint-3); }
.le-row.is-focus { box-shadow: inset 2px 0 0 var(--gold); }
.le-row.is-disabled .le-name { color: var(--faint); }

.le-grip {
    flex: 0 0 10px;
    align-self: stretch;
    background-image: radial-gradient(circle, var(--faint) 1px, transparent 1.5px);
    background-size: 5px 6px;
    opacity: 0.6;
    cursor: grab;
}

.le-toggle {
    flex: 0 0 38px;
    padding: 2px 0;
    border: 1px solid var(--input-border);
    border-radius: 999px;
    color: var(--ok);
    font: 600 11px var(--body);
    text-align: center;
    cursor: pointer;
}

.le-row.is-disabled .le-toggle { color: var(--faint); }
.le-toggle.is-inert { cursor: default; opacity: 0.6; }

.le-name { flex: 1 1 0; min-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: pre; font-weight: 600; }

.le-action {
    flex: 0 0 auto;
    padding: 1px 8px;
    border: 1px solid var(--hairline);
    border-radius: 4px;
    font-size: 12px;
    color: var(--text-2);
}

.le-action-keep, .le-action-keepupto { border-color: var(--ok); color: var(--ok); }
.le-action-salvage { border-color: var(--mod-border); color: var(--mod); }
.le-action-sell { border-color: var(--gold-border); color: var(--gold); }

.le-badges { display: inline-flex; flex: 0 0 auto; flex-wrap: nowrap; gap: 4px; }

.le-badge {
    padding: 0 6px;
    border: 1px solid var(--hairline);
    border-radius: 4px;
    color: var(--muted);
    font-size: 11px;
}

.le-badge-disabled, .le-badge-deadInVt { border-color: var(--warn); color: var(--warn); }
.le-badge-unknownType, .le-badge-diagnostics { border-color: var(--err); color: var(--err); }
.le-badge-needsCharacter, .le-badge-needsBuffedModel, .le-badge-needsPalette { border-color: var(--spell-border); color: var(--spell); }

/* Slow-check marker (ui/SlowMark.tsx): muted amber clock, 12px, so it never competes with the name. */
.le-slow {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    color: var(--warn);
    opacity: 0.6;
    cursor: help;
}
.le-slow:hover { opacity: 0.95; }
/* Every item reaching the rule is appraised: fuller opacity and a faint amber ring, still not red. */
.le-slow-strong { opacity: 0.95; padding: 2px; border: 1px solid var(--warn); border-radius: 999px; }
.le-slow svg { display: block; }

.le-row-header {
    background: var(--gold-tint-2);
    border-bottom: 1px solid var(--gold-border);
    color: var(--gold);
}

.le-row-header.is-selected { background: var(--gold-tint-3); }
/* With spacers hidden, a header breaks away from the rows above by a transparent top border inside
   its fixed-height row (the list windowing is arithmetic on one row height, so no margin). The tint
   is clipped to the padding box so the gap shows the list background. */
.le-row-header.le-row-gap { background-clip: padding-box; border-top: 8px solid transparent; }
.le-row-header.le-row-gap.le-depth-1 { border-top-width: 4px; }
.le-row-header.le-depth-1 { background: var(--gold-tint); }
.le-header-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: pre; font: 600 15px var(--head); letter-spacing: 0.02em; }
.le-header-count { flex: 0 0 auto; color: var(--muted); font-size: 12px; }

.le-drop-line {
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--gold);
    pointer-events: none;
}

.le-drop-line.is-hidden { display: none; }

/* ---- rule detail ---- */

.le-rule-name { margin: 0 0 8px; font-size: 20px; overflow-wrap: anywhere; }
.le-sub { margin: 16px 0 6px; font-size: 15px; color: var(--gold); }
.le-kv { display: grid; grid-template-columns: max-content 1fr; gap: 2px 12px; margin: 0; }
.le-kv dt { color: var(--muted); font-size: 13px; }
.le-kv dd { margin: 0; overflow-wrap: anywhere; }
.le-reqs { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.le-req { padding: 8px 10px; border: 1px solid var(--hairline); border-radius: 6px; }
.le-req-label { font-weight: 600; }
.le-req-summary { color: var(--text-2); font-size: 13px; overflow-wrap: anywhere; }
.le-req-fields { margin-top: 6px; }
.le-facts .le-badges { flex-wrap: wrap; margin: 8px 0 0; }

/* ---- search, filters, checks, salvage combine ---- */

.le-search {
    flex: 1 1 220px;
    min-width: 160px;
    max-width: 360px;
    min-height: 34px;
    padding: 4px 10px;
    background: var(--input);
    border: 1px solid var(--input-border);
    border-radius: 6px;
    color: var(--text);
    font: inherit;
    font-size: 14px;
}

.le-input {
    min-height: 34px;
    padding: 4px 10px;
    background: var(--input);
    border: 1px solid var(--input-border);
    border-radius: 6px;
    color: var(--text);
    font: inherit;
    font-size: 14px;
}

.le-facets {
    display: flex;
    flex: 1 0 100%;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 8px;
    border-top: 1px solid var(--hairline);
}

.le-facet { flex: 1 1 200px; min-width: 0; max-height: 180px; margin: 0; padding: 4px 8px; overflow: auto; border: 1px solid var(--hairline); border-radius: 6px; }
.le-facet legend { padding: 0 4px; color: var(--gold); font-size: 13px; }
.le-facet-opt { display: flex; align-items: baseline; gap: 6px; padding: 2px 0; font-size: 13px; }
.le-filter-hint { margin: 0; padding: 6px 10px; border-bottom: 1px solid var(--hairline); color: var(--text-2); font-size: 13px; }
.le-node-count.is-nomatch { opacity: 0.5; }

.le-checksbtn-error:not(:disabled) { border-color: var(--err); color: var(--err); }
.le-checksbtn-warning:not(:disabled) { border-color: var(--warn); color: var(--warn); }
.le-check-list { max-height: 320px; }
.le-check-fatal .le-diag-sev, .le-check-error .le-diag-sev { color: var(--err); }
.le-check-warning .le-diag-sev { color: var(--warn); }
.le-check-info .le-diag-sev { color: var(--muted); }
.le-tag { padding: 0 6px; border: 1px solid var(--hairline); border-radius: 4px; color: var(--muted); font-size: 12px; }
.le-check-cite { margin-top: 2px; font-size: 12px; }
.le-check-cite summary { cursor: pointer; color: var(--muted); }

.le-salvage-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.le-salvage-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.le-salvage-name { flex: 0 0 200px; }
.le-salvage-field { display: inline-flex; flex-direction: column; gap: 2px; }
.le-salvage-add { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.le-salvage-problem { margin: 2px 0 0; color: var(--err); font-size: 13px; }
/* ---- spacer rows, inline section prompt, detail head ---- */

/* A spacer keeps the fixed row slot (the list windowing is arithmetic on one row height) but draws
   nothing: no name, summary, pill or badge. Only the grip and the selection state show. */
.le-row-spacer { background: transparent; }
.le-row-spacer.is-selected { background: var(--gold-tint-3); }
.le-row-spacer.is-focus { box-shadow: inset 2px 0 0 var(--gold); }

.le-inline-form {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--hairline);
}

.le-inline-label { color: var(--text-2); font-size: 13px; }
.le-inline-input { flex: 1 1 220px; min-width: 160px; }

.le-detail-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.le-detail-head .le-pane-title { margin: 0; }

/* Generated blocks (loot-editor generators): lock marker on generated rules, tag on the block header. */
.le-lock, .le-gen-tag {
    flex: 0 0 auto;
    padding: 0 6px;
    border: 1px solid var(--hairline);
    border-radius: 4px;
    color: var(--muted);
    font: 11px var(--body);
}
.le-gen-tag { border-color: var(--gold-border); color: var(--gold); }

/* ---- named lists ---- */

.le-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.le-list-tools { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.le-list-new { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.le-list-status { margin: 8px 0 0; color: var(--ok); }
.le-list-table, .le-grid-table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 14px; }
.le-list-table th, .le-list-table td, .le-grid-table th, .le-grid-table td { padding: 4px 8px; border-top: 1px solid var(--rule); text-align: left; vertical-align: middle; }
.le-list-table thead th, .le-grid-table thead th { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.le-list-name { font-weight: 600; }
.le-list-row.is-open { background: var(--gold-tint-3); }
.le-list-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.le-list-table .le-list-actions { margin-top: 0; }
.le-list-editor { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--hairline); }
.le-list-field { display: flex; flex-direction: column; gap: 4px; }
.le-list-body { min-height: 80px; resize: vertical; }
.le-list-preview { margin: 0; padding: 8px 10px; max-height: 160px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; background: var(--input); border: 1px solid var(--hairline); border-radius: 6px; }
.le-list-review { margin-top: 12px; }
.le-list-review p { margin: 0 0 6px; }
.le-check { display: inline-flex; align-items: center; gap: 6px; }
.le-grid-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 6px; }
.le-grid-filter { max-width: 240px; }
.le-grid-note { margin: 4px 0; }
/* The toolbar (filter, legacy toggle, tier checkboxes) stays put; only the tables scroll. */
.le-grid-tables { max-height: 420px; overflow: auto; }
.le-grid-table thead th { position: sticky; top: 0; background: var(--panel); text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--text-2); }
.le-grid-group td { background: var(--gold-tint); }
.le-grid-group-name { margin-right: 12px; font-weight: 600; }
.le-grid-stem { font-weight: 400; }
.le-grid-cell { text-align: center; min-width: 64px; }
.le-grid-cell.is-hit { color: var(--gold); font-weight: 700; }
.le-ack { display: block; margin-top: 6px; }
.le-convert { margin-top: 8px; }
.le-convert-ok { color: var(--ok); }
.le-convert-diff p { margin: 4px 0; color: var(--warn); }
.le-import-list, .le-import-similar { margin: 8px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.le-import-row { padding: 8px 0; border-top: 1px solid var(--rule); display: flex; flex-direction: column; gap: 6px; }
.le-import-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.le-import-head .le-input { flex: 1 1 220px; }