.bl-status { padding: 0.5rem; }
.bl-status .bl-scene { margin: 0 0 0.5rem; }
.bl-levels { width: 100%; border-collapse: collapse; margin: 0.25rem 0 0.5rem; }
.bl-levels th, .bl-levels td { text-align: left; padding: 2px 6px; border-bottom: 1px solid var(--color-border-light-tertiary, rgba(0,0,0,0.15)); }
.bl-counts { list-style: none; margin: 0.25rem 0; padding: 0; }
.bl-counts li { padding: 1px 0; }
.bl-status .bl-bad { color: var(--color-level-error, #b00020); }
.bl-status .bl-ok { color: var(--color-level-success, #2e7d32); }
.bl-muted, .bl-note { opacity: 0.7; font-size: 0.9em; }
.bl-status button { margin-top: 0.5rem; }

.bl-status .bl-warn { color: var(--color-level-warning, #b8860b); }
.bl-actions { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.6rem; }
.bl-actions button { flex: 1 1 auto; }
.bl-form .form-group { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin: 0.25rem 0; }
.bl-form .notes { opacity: 0.7; font-size: 0.9em; margin-top: 0.4rem; }

.bl-audit-head { display: flex; align-items: center; justify-content: space-between; margin: 0.25rem 0 0.4rem; }
.bl-issues { list-style: none; margin: 0; padding: 0; }
.bl-issue { display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.35rem 0.25rem; border-bottom: 1px solid var(--color-border-light-tertiary, rgba(0,0,0,0.12)); }
.bl-issue-sev { margin-top: 2px; }
.bl-issue-text { flex: 1 1 auto; display: flex; flex-direction: column; }
.bl-issue-msg { line-height: 1.25; }
.bl-issue-target { opacity: 0.65; font-size: 0.85em; }
.bl-issue-actions { display: flex; gap: 0.2rem; flex: 0 0 auto; }
.bl-issue-actions button { width: 1.8rem; flex: 0 0 auto; }
.bl-ignored { margin-top: 0.5rem; }
.bl-ignored summary { cursor: pointer; opacity: 0.8; }
.bl-audit-summary { margin: 0.4rem 0; }

.bl-rules { margin-top: 0.5rem; }
.bl-rules summary { cursor: pointer; opacity: 0.85; }
.bl-rules-hint { margin: 0.3rem 0; }
.bl-rules-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.25rem; }
.bl-rule { display: flex; align-items: center; gap: 0.4rem; justify-content: flex-start; text-align: left; }
.bl-rule.off { opacity: 0.5; }
.bl-rule .bl-rule-label { flex: 1 1 auto; }
.bl-rule .bl-rule-count { flex: 0 0 auto; font-variant-numeric: tabular-nums; opacity: 0.8; background: var(--color-border-light-tertiary, rgba(0,0,0,0.1)); border-radius: 8px; padding: 0 6px; }
/* rules grouped by risk severity */
.bl-rules-group { margin: 0.35rem 0 0.5rem; border-left: 3px solid transparent; padding-left: 0.5rem; }
.bl-rules-group-head { display: flex; align-items: baseline; gap: 0.4rem; margin: 0.15rem 0 0.3rem; font-size: 0.9em; }
.bl-rules-group-head .bl-rules-group-label { font-weight: 600; }
.bl-rules-group-head .bl-rules-group-count { font-variant-numeric: tabular-nums; background: rgba(0,0,0,0.25); border-radius: 8px; padding: 0 7px; font-size: 0.82em; }
.bl-rules-group-head .bl-rules-group-desc { opacity: 0.6; font-size: 0.8em; margin-left: auto; text-align: right; }
.bl-rules-group.bl-risk-red    { border-left-color: var(--color-level-error, #d23b3b); }
.bl-rules-group.bl-risk-amber  { border-left-color: var(--color-level-warning, #d9a400); }
.bl-rules-group.bl-risk-green  { border-left-color: var(--color-level-success, #3fae57); }
.bl-rules-group.bl-risk-red .bl-rules-group-head > i    { color: var(--color-level-error, #d23b3b); }
.bl-rules-group.bl-risk-amber .bl-rules-group-head > i  { color: var(--color-level-warning, #d9a400); }
.bl-rules-group.bl-risk-green .bl-rules-group-head > i  { color: var(--color-level-success, #3fae57); }

/* Tile HUD auto-config column */
.bl-hud { display: flex; flex-direction: column; gap: 4px; }
.bl-hud .bl-hud-btn { width: 40px; height: 40px; line-height: 40px; }
.bl-hud .bl-hud-btn.active { color: #4fc3f7; box-shadow: 0 0 8px #4fc3f7; border-radius: 4px; }
.bl-region-hud { display: flex; flex-direction: column; gap: 4px; }

/* Helper panel */
.bl-panel { padding: 0.4rem; display: flex; flex-direction: column; gap: 0.4rem; }
.bl-panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; }
.bl-panel-scene { font-weight: bold; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bl-panel-count { opacity: 0.7; font-size: 0.85em; flex: 0 0 auto; }
.bl-toggles { display: flex; gap: 0.35rem; }
.bl-toggles .bl-toggle { flex: 1 1 0; justify-content: center; }
.bl-toggle.on { box-shadow: inset 0 0 0 1px var(--color-level-success, #2e7d32); }
.bl-panel-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.35rem; }
.bl-panel-actions .bl-has-issues { color: var(--color-level-error, #b00020); }

/* "Open Better Levels" button under the Levels nav */
.bl-nav-open { display: block; width: auto; margin: 4px auto 0; padding: 2px 8px; font-size: var(--font-size-12, 12px); white-space: nowrap; }
.bl-nav-open i { margin-right: 4px; }

/* Panel: collapsed button + refined header */
.bl-panel-collapsed { width: 100%; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 4px 6px; }
.bl-badge { background: var(--color-level-error, #b00020); color: #fff; border-radius: 8px; padding: 0 6px; font-size: 0.82em; line-height: 1.4; }
.bl-panel-meta { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.bl-collapse { cursor: pointer; opacity: 0.6; }
.bl-collapse:hover { opacity: 1; }
.bl-toggle.active { box-shadow: inset 0 0 0 1px var(--color-level-success, #2e7d32); }

/* Collapsed: the whole window becomes a floating button (no header/frame) */
.bl-collapsed-window { background: transparent !important; border: none !important; box-shadow: none !important; backdrop-filter: none !important; padding: 0 !important; min-width: 0 !important; min-height: 0 !important; width: auto !important; height: auto !important; }
.bl-collapsed-window .window-header { display: none !important; }
.bl-collapsed-window .window-content { padding: 0 !important; background: transparent !important; border: none !important; overflow: visible !important; }
.bl-panel-collapsed {
  display: inline-flex; align-items: center; gap: 6px; cursor: grab;
  padding: 6px 10px; border-radius: 18px;
  background: var(--color-cool-4, #2b2d36); color: var(--color-text-light-highlight, #f0f0e0);
  border: 1px solid var(--color-border-dark, #000); box-shadow: 0 2px 6px rgba(0,0,0,0.5);
}
.bl-panel-collapsed:hover { background: var(--color-cool-3, #3a3d49); }
.bl-panel-collapsed:active { cursor: grabbing; }

/* ===== Panel redesign: compact, clear hierarchy ===== */
#baileywiki-better-levels-panel .window-content { padding: 0; }
.bl-panel { padding: 6px; display: flex; flex-direction: column; gap: 6px; }
.bl-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin: 0; }
.bl-panel-title { font-weight: 600; font-size: var(--font-size-13, 13px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bl-panel-count { opacity: 0.55; font-size: 0.78em; font-variant-numeric: tabular-nums; }
.bl-panel-head .bl-collapse { cursor: pointer; opacity: 0.55; padding: 0 2px; }
.bl-panel-head .bl-collapse:hover { opacity: 1; }

.bl-toggles { display: flex; gap: 6px; }
.bl-toggles .bl-toggle { flex: 1 1 0; height: 30px; line-height: 28px; padding: 0 6px; margin: 0; display: flex; align-items: center; justify-content: center; gap: 6px; border-radius: 4px; font-size: var(--font-size-12, 12px); background: rgba(0,0,0,0.25); border: 1px solid rgba(255,255,255,0.08); box-shadow: none; }
.bl-toggles .bl-toggle:hover { border-color: rgba(255,255,255,0.22); }
.bl-toggles .bl-toggle.active { background: var(--color-warm-2, rgba(120,46,34,0.6)); border-color: var(--color-warm-1, #ff7847); box-shadow: none; }
.bl-toggles .bl-toggle i { opacity: 0.85; }

.bl-actions-row { display: flex; gap: 6px; }
.bl-actions-row button { flex: 1 1 0; height: 26px; line-height: 24px; padding: 0; margin: 0; display: flex; align-items: center; justify-content: center; position: relative; border-radius: 4px; background: rgba(0,0,0,0.15); border: 1px solid rgba(255,255,255,0.06); box-shadow: none; opacity: 0.8; }
.bl-actions-row button:hover { opacity: 1; background: rgba(255,255,255,0.08); }
.bl-actions-row .bl-has-issues { color: var(--color-level-error, #ff5555); opacity: 1; }
.bl-actions-row .bl-badge { position: absolute; top: -5px; right: -5px; font-size: 0.68em; padding: 0 4px; line-height: 1.5; }

/* Audit window: sticky top toolbar so Refresh stays reachable with long result lists */
.bl-audit-top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; position: sticky; top: 0; z-index: 2; background: rgba(20, 22, 28, 0.98); padding: 0.3rem 0; margin-bottom: 0.3rem; }
.bl-audit-top .bl-scene { margin: 0; }
.bl-audit-top button { flex: 0 0 auto; white-space: nowrap; }

/* Level count is clickable (opens the Level Manager) */
.bl-panel-count.bl-lm-open { cursor: pointer; text-decoration: underline dotted; }
.bl-panel-count.bl-lm-open:hover { opacity: 1; }

/* ===== Level Manager modal ===== */
.bl-lm { padding: 0.4rem 0.2rem; display: flex; flex-direction: column; gap: 0.4rem; }
.bl-lm-scene { margin: 0 0 0.2rem; }
.bl-lm-table { width: 100%; border-collapse: collapse; }
.bl-lm-table th, .bl-lm-table td { padding: 3px 6px; border-bottom: 1px solid var(--color-border-light-tertiary, rgba(0,0,0,0.12)); text-align: left; vertical-align: middle; }
.bl-lm-table th { font-size: 0.82em; opacity: 0.7; font-weight: 600; }
.bl-lm-name input { width: 100%; min-width: 120px; }
.bl-lm-num { width: 4.5rem; }
.bl-lm-num input { width: 4rem; text-align: right; }
.bl-lm-counts { white-space: nowrap; font-variant-numeric: tabular-nums; }
.bl-lm-counts span { display: inline-flex; align-items: center; gap: 2px; margin-right: 7px; opacity: 0.85; font-size: 0.85em; }
.bl-lm-counts i { opacity: 0.6; }
.bl-lm-del button { width: 1.8rem; }
.bl-lm-new td { background: var(--color-warm-2, rgba(120,46,34,0.18)); }
.bl-lm-hint { opacity: 0.65; font-size: 0.85em; margin: 0.2rem 0; }
/* Level Manager sizing. The window is height:auto so a two-level scene stays compact, but auto with
   no ceiling means a tall building pushes the action bar off the bottom of the screen with nothing to
   scroll. Cap the window at the viewport, scroll the level table + visibility matrix, pin the actions. */
#baileywiki-better-levels-manager { max-height: calc(100vh - 80px); }
#baileywiki-better-levels-manager .window-content { overflow: hidden; display: flex; flex-direction: column; min-height: 0; }
#baileywiki-better-levels-manager .bl-lm { flex: 1 1 auto; min-height: 0; }
.bl-lm-scroll-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding-right: 3px; }

/* Same ceiling for the other height:auto windows. These hold lists that grow without bound (backups,
   sample scenes, per-level status), so they can run off-screen for the same reason. No pinned footer
   here — plain scrolling is enough to reach everything. */
#baileywiki-better-levels-backup,
#baileywiki-better-levels-status,
#baileywiki-better-levels-samples { max-height: calc(100vh - 80px); }
#baileywiki-better-levels-backup .window-content,
#baileywiki-better-levels-status .window-content,
#baileywiki-better-levels-samples .window-content { overflow-y: auto; }

.bl-lm-actions { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.3rem; flex: 0 0 auto; }
.bl-lm-actions .bl-lm-spacer { flex: 1 1 auto; }
.bl-lm-actions .bl-lm-commit { font-weight: 600; }

/* ===== Level Manager: visibility matrix ===== */
.bl-vis { margin: 0.4rem 0; border-top: 1px solid var(--color-border-light-tertiary, rgba(0,0,0,0.12)); padding-top: 0.35rem; }
.bl-vis > summary { cursor: pointer; font-weight: 600; opacity: 0.9; }
.bl-vis-hint { margin: 0.3rem 0; }
.bl-vis-scroll { overflow-x: auto; }
/* width:max-content stops the browser compressing the grid to fit its container. Under default auto
   table layout the columns were squeezed and the nowrap labels simply overflowed and were clipped —
   which is why widening the window helped the row labels but never the column headers. */
.bl-vis-table { border-collapse: collapse; margin: 0.25rem 0; width: max-content; }
.bl-vis-table th, .bl-vis-table td { padding: 2px 5px; text-align: center; border: 1px solid var(--color-border-light-tertiary, rgba(0,0,0,0.12)); }
/* Column headers read bottom-to-top. Level names carrying an elevation band are far too long to sit
   horizontally above a 2em cell — a dozen levels would be metres wide — so the label runs vertically
   and each column stays the width of its toggle. */
.bl-vis-table thead th.bl-vis-col {
  font-size: 0.72em; font-weight: 600; opacity: 0.75; white-space: nowrap;
  writing-mode: vertical-rl; transform: rotate(180deg);
  vertical-align: bottom; text-align: left; padding: 5px 2px;
}
.bl-vis-table thead th.bl-vis-col span { display: inline-block; }
.bl-vis-corner { font-size: 0.72em; opacity: 0.6; text-align: right !important; white-space: nowrap; vertical-align: bottom; }
.bl-vis-table th.bl-vis-row { text-align: right; font-size: 0.8em; font-weight: 600; white-space: nowrap; opacity: 0.85; }
.bl-vis-cell { width: 2em; }
.bl-vis-self { background: var(--color-border-light-tertiary, rgba(0,0,0,0.06)); }
.bl-vis-dash { opacity: 0.4; }
.bl-vis-toggle { width: 1.7em; height: 1.7em; line-height: 1; padding: 0; border-radius: 4px; opacity: 0.55; }
.bl-vis-toggle.on { opacity: 1; color: var(--color-level-success, #3fae57); }
.bl-vis-toggle.off i { opacity: 0.5; }
.bl-vis-toggle:hover { opacity: 1; }
.bl-vis-newnote { margin: 0.25rem 0; }
.bl-vis-actions { margin-top: 0.3rem; }

/* ===== Audit risk buckets ===== */
.bl-bucket { border: 1px solid rgba(255,255,255,0.08); border-left-width: 4px; border-radius: 5px; margin: 0.5rem 0; padding: 0.1rem 0.4rem 0.3rem; }
.bl-bucket-head { display: flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.1rem; }
.bl-bucket-head .bl-bucket-label { font-weight: 600; }
.bl-bucket-head .bl-bucket-count { font-variant-numeric: tabular-nums; background: rgba(0,0,0,0.25); border-radius: 8px; padding: 0 7px; font-size: 0.85em; }
.bl-bucket-head .bl-bucket-desc { opacity: 0.6; font-size: 0.82em; margin-left: auto; text-align: right; }
.bl-bucket.bl-risk-red    { border-left-color: var(--color-level-error, #d23b3b); }
.bl-bucket.bl-risk-amber  { border-left-color: var(--color-level-warning, #d9a400); }
.bl-bucket.bl-risk-green  { border-left-color: var(--color-level-success, #3fae57); }
.bl-bucket.bl-risk-red .bl-bucket-head > i    { color: var(--color-level-error, #d23b3b); }
.bl-bucket.bl-risk-amber .bl-bucket-head > i  { color: var(--color-level-warning, #d9a400); }
.bl-bucket.bl-risk-green .bl-bucket-head > i  { color: var(--color-level-success, #3fae57); }
.bl-issue-tip { margin-top: 3px; }
.bl-issue-tip summary { cursor: pointer; opacity: 0.7; font-size: 0.82em; }
.bl-issue-tip summary:hover { opacity: 1; }
.bl-issue-tip p { margin: 3px 0 1px; opacity: 0.8; font-size: 0.85em; line-height: 1.3; }

/* ===== Backup & Restore window ===== */
.bl-backup { padding: 0.3rem 0.2rem; display: flex; flex-direction: column; gap: 0.4rem; }
.bl-backup-scene { margin: 0; }
.bl-backup-hint { margin: 0 0 0.2rem; }
.bl-backup-actions { margin-bottom: 0.2rem; }
.bl-backup-table { width: 100%; border-collapse: collapse; }
.bl-backup-table th, .bl-backup-table td { padding: 3px 6px; border-bottom: 1px solid var(--color-border-light-tertiary, rgba(0,0,0,0.12)); text-align: left; vertical-align: middle; }
.bl-backup-table th { font-size: 0.82em; opacity: 0.7; }
.bl-backup-when { white-space: nowrap; font-variant-numeric: tabular-nums; opacity: 0.85; }
.bl-backup-name { max-width: 230px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bl-backup-row-actions { white-space: nowrap; text-align: right; }
.bl-backup-row-actions button { width: auto; }

/* ===== Frameless helper panel: hide the window title bar (no Close/Detach); custom header drags ===== */
#baileywiki-better-levels-panel .window-header { display: none; }
.bl-panel-head { cursor: grab; }
.bl-panel-head:active { cursor: grabbing; }
.bl-panel-head .bl-collapse { cursor: pointer; }

/* Build Mode label + on/off switch */
.bl-buildmode-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 1px 2px; }
.bl-buildmode-label { font-size: var(--font-size-12, 12px); display: inline-flex; align-items: center; gap: 6px; }
.bl-buildmode-label i { opacity: 0.7; }
.bl-switch { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: none; box-shadow: none; padding: 2px 2px; margin: 0; width: auto; cursor: pointer; }
.bl-switch:hover { background: transparent; }
.bl-switch-track { width: 30px; height: 16px; border-radius: 9px; background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.15); position: relative; transition: background 0.15s; flex: 0 0 auto; }
.bl-switch-thumb { position: absolute; top: 1px; left: 1px; width: 12px; height: 12px; border-radius: 50%; background: #bbb; transition: left 0.15s, background 0.15s; }
.bl-switch.on .bl-switch-track { background: var(--color-level-success, #2e7d32); border-color: var(--color-level-success, #2e7d32); }
.bl-switch.on .bl-switch-thumb { left: 15px; background: #fff; }
.bl-switch-state { font-size: 11px; opacity: 0.8; min-width: 1.6em; text-align: left; }

/* Stair toggle button (in the action row) active state */
.bl-actions-row .bl-toggle-btn.active { color: #4fc3f7; box-shadow: inset 0 0 0 1px var(--color-level-success, #2e7d32); opacity: 1; }
.bl-actions-row { flex-wrap: wrap; }

/* Panel header controls: minimize + close */
.bl-panel-controls { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.bl-panel-controls a { cursor: pointer; opacity: 0.55; padding: 0 1px; }
.bl-panel-controls a:hover { opacity: 1; }
.bl-panel-controls .bl-close:hover { color: var(--color-level-error, #d23b3b); }

/* ===== Sample scenes modal ===== */
.bl-samples { padding: 0.3rem 0.2rem; display: flex; flex-direction: column; gap: 0.4rem; }
.bl-samples-hint { margin: 0 0 0.2rem; }
.bl-sample-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.45rem 0.5rem; border: 1px solid rgba(255,255,255,0.08); border-radius: 6px; background: rgba(0,0,0,0.12); }
.bl-sample-meta { flex: 1 1 auto; }
.bl-sample-meta strong { font-size: var(--font-size-14, 14px); }
.bl-sample-meta .bl-muted { font-size: 0.85em; line-height: 1.3; margin-top: 2px; }
.bl-sample-row button { flex: 0 0 auto; white-space: nowrap; }

/* ===== Placeables tab: tile thumbnails + hover preview ===== */
.bl-thumb {
  width: 30px; height: 30px; object-fit: contain; flex: 0 0 auto;
  margin-right: 6px; border-radius: 3px; vertical-align: middle;
  background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.08);
}
i.bl-thumb.bl-thumb-none {
  display: inline-flex; align-items: center; justify-content: center;
  opacity: 0.35; font-size: 14px;
}
.bl-thumb-preview {
  position: fixed; z-index: 10000; pointer-events: none;
  padding: 6px; border-radius: 6px;
  background: var(--color-cool-4, #1d2029); border: 1px solid rgba(255,255,255,0.15);
  box-shadow: 0 6px 22px rgba(0,0,0,0.6);
}
.bl-thumb-preview img, .bl-thumb-preview video {
  display: block; max-width: 320px; max-height: 320px;
  object-fit: contain; border-radius: 3px;
  background: repeating-conic-gradient(#2b2f3a 0% 25%, #23262f 0% 50%) 50% / 16px 16px;  /* checker = alpha */
}
.bl-thumb-preview-label {
  margin-top: 5px; max-width: 320px; text-align: center;
  font-size: 11px; opacity: 0.85; word-break: break-word;
}

/* ---- Placeables tab: drag-to-reorder drop indicator -------------------- */
.bl-drop-above { box-shadow: inset 0 3px 0 -1px var(--color-shadow-highlight, #ff9d00); }
.bl-drop-below { box-shadow: inset 0 -3px 0 -1px var(--color-shadow-highlight, #ff9d00); }
.bl-drop-bad   { box-shadow: inset 0 0 0 2px #c0392b !important; cursor: no-drop; }

/* ---- Placeables tab: pointer drag ------------------------------------- */
body.bl-dragging, body.bl-dragging * { user-select: none !important; cursor: grabbing !important; }
.bl-drag-ghost {
  position: fixed; z-index: 100000; pointer-events: none;
  padding: 2px 8px; border-radius: 3px; font-size: 0.8rem; font-weight: 600;
  background: var(--color-shadow-primary, #4b6cb7); color: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
}

/* Native image/text drag inside the placeables list steals pointer events — disable it. */
.bl-thumb, .bl-thumb-video { -webkit-user-drag: none; user-drag: none; }

/* ---- Audit: scrollable content + collapsible buckets + per-bucket Fix All ---- */
#baileywiki-better-levels-audit .window-content { overflow: hidden; display: flex; flex-direction: column; padding-top: 0; }
#baileywiki-better-levels-audit .bl-audit { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-right: 2px; }
.bl-bucket-head { cursor: pointer; user-select: none; }
.bl-bucket-head:hover { background: rgba(255,255,255,0.04); border-radius: 4px; }
.bl-bucket-caret { opacity: 0.7; width: 0.8em; }
.bl-bucket.bl-collapsed { padding-bottom: 0.1rem; }
.bl-bucket-fix { flex: 0 0 auto; margin-left: 0.4rem; white-space: nowrap; font-size: 0.82em; padding: 1px 8px; height: auto; line-height: 1.6; }
.bl-bucket-head .bl-bucket-desc { margin-left: 0.5rem; }

/* Create modes -------------------------------------------------------------------------------------
   The crosshair is applied to the BODY, not the canvas element, so it survives the canvas being torn
   down and rebuilt on a level change — which is exactly when the user discovers they were looking at
   the wrong level and needs the mode to still be armed. */
body.bl-create-cursor #board,
body.bl-create-cursor canvas { cursor: crosshair !important; }

.bl-create-menu { display: flex; flex-direction: column; gap: 3px; margin: 0.35rem 0; }
.bl-create-menu button { justify-content: flex-start; text-align: left; font-size: 0.85em; padding: 3px 6px; }
.bl-create-menu button.active { color: #4fc3f7; box-shadow: 0 0 6px #4fc3f7; border-radius: 4px; }

/* The armed-mode banner. Deliberately loud: an armed mode you cannot see is how this module has
   stranded users before, so it stays on screen whether or not the Create menu is open. */
.bl-create-active {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  margin: 0.35rem 0; padding: 3px 6px; border-radius: 4px;
  border: 1px solid #4fc3f7; color: #4fc3f7; font-size: 0.82em;
}
.bl-create-active button { flex: 0 0 auto; width: 1.6em; height: 1.6em; line-height: 1; padding: 0; }

/* ---- Create-mode hint -------------------------------------------------------------------------
 * Persistent while a Create mode is armed. Sits above the hotbar and centred, because that is where
 * the eye already goes for modal state in Foundry, and it must be readable without hunting for the
 * helper panel — which may be collapsed or dragged aside while the user works the canvas.
 * pointer-events:none is load-bearing: this floats over the board, and it must never eat a click
 * meant for the map it is telling you how to use. */
#bl-create-hint {
  position: fixed;
  bottom: 90px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 70;                       /* above the board, below dialogs */
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(15, 18, 26, 0.88);
  border: 1px solid var(--color-border-highlight, #4a7ec9);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
  font-size: 13px;
  line-height: 1.4;
  white-space: nowrap;
  color: #f0f0f0;
}
#bl-create-hint .bl-hint-what { font-weight: 600; color: #7fb2ff; }
#bl-create-hint .bl-hint-what i { margin-right: 5px; }
#bl-create-hint .bl-hint-exit { opacity: 0.8; border-left: 1px solid rgba(255,255,255,0.22); padding-left: 10px; }

/* ---- Level Manager: background column ---------------------------------------------------------
 * Three states, distinguished at a glance without adding a word of text to the row:
 *   .bl-bg-own        solid thumbnail  — this level's own image
 *   .bl-bg-inherited  faded thumbnail  — another level's image showing through
 *   .bl-bg-color      colour swatch    — no image anywhere visible below
 * .bl-bg-staged marks an edit that has not been committed yet, matching how the rest of this window
 * treats unsaved state: the user must be able to see what Cancel would undo. */
.bl-lm-bg { width: 34px; text-align: center; }
.bl-bg-btn {
  width: 28px; height: 28px; padding: 0; line-height: 0;
  border: 1px solid var(--color-border-dark, #444); border-radius: 3px;
  background: rgba(0, 0, 0, 0.25); cursor: pointer; overflow: hidden;
}
.bl-bg-btn:hover { border-color: var(--color-border-highlight, #4a7ec9); }
.bl-bg-btn img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bl-bg-inherited img { opacity: 0.4; filter: grayscale(0.5); }
.bl-bg-swatch { display: block; width: 100%; height: 100%; }
/* Unsaved: a ring rather than a colour change, so it reads as "pending" on every one of the three states. */
.bl-bg-staged { box-shadow: 0 0 0 2px var(--color-border-highlight, #4a7ec9); }

.bl-bg-dialog .bl-bg-preview { display: block; max-width: 100%; max-height: 160px; margin: 0 auto 8px; border-radius: 3px; }
.bl-bg-dialog .bl-bg-note { margin-bottom: 8px; opacity: 0.85; }
.bl-bg-dialog input[type="color"] { width: 44px; padding: 0; height: 26px; }
.bl-bg-dialog .bl-bg-browse { flex: 0 0 32px; }

/* ---- Simple Elevation: optional token-HUD readout -------------------------------------------------
 * A compact "10 : L2" chip on the token HUD, shown only when the GM opts in. Non-interactive, so it can
 * never intercept a click meant for the elevation input it sits beside. */
.bl-elev-readout {
  margin-top: 3px;
  padding: 1px 6px;
  border-radius: 3px;
  background: rgba(15, 18, 26, 0.85);
  border: 1px solid var(--color-border-highlight, #4a7ec9);
  color: #cfe0ff;
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
}