/* Level design, the inspector (levelinspector.js). Everything is under .li-; the boxes,
   sections and fields inside it are the kit of levelchecklist.css, which must be linked too. */

.li-root {
  display: flex; flex-direction: column; min-height: 0; min-width: 0;
  font-size: 12px; line-height: 1.4; color: var(--text); background: var(--panel);
}
.li-head { flex: none; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.li-title { font-weight: 600; }
.li-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #4a4d55 transparent; }

/* ---------------------------------------------------------------- what the row is */
.li-what { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px 12px; }
.li-what-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; max-width: 100%; }
.li-what-name { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.li-what-sub { color: var(--dim); font-size: 11px; }
.li-note { margin: 0; color: var(--text); font-size: 12px; line-height: 1.45; }
.li-dim { color: var(--dim); }
.li-warn { color: var(--warn); }
.li-h { margin-top: 8px; font-weight: 600; }

.li-pill {
  display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px 1px 5px;
  font-size: 11px; font-weight: 600; line-height: 14px; white-space: nowrap;
  border: 1px solid currentColor; border-radius: 9px;
}
.li-pill-shadable { color: var(--accent); background: rgba(78, 161, 255, .14); }
.li-pill-tiled { color: #3cc4b1; background: rgba(60, 196, 177, .14); }
.li-pill-group { color: var(--warn); background: rgba(224, 163, 62, .14); }
.li-pill-auto { color: var(--accent); background: none; border-style: dashed; font-weight: 500; }

.li-links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.li-link { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------------------------------------------------------------- fields */
/* The panel is narrow: a field is its words over its control, and a tick box sits in front
   of its words instead. (The kit's own layout, words beside the control, is for the windows.) */
.li-root .le-field {
  grid-template-columns: minmax(0, 1fr) 24px;
  grid-template-areas: "label label" "control reset";
  align-items: center;
}
.li-root .le-label-cell { grid-area: label; }
.li-root .le-control-cell { grid-area: control; justify-content: flex-start; max-width: none; }
.li-root .le-control-cell .le-select { width: 100%; max-width: 260px; }
.li-root .le-reset { grid-area: reset; }
.li-root .le-field:has(> .le-control-cell > .le-check) {
  grid-template-columns: auto minmax(0, 1fr) 24px;
  grid-template-areas: "control label reset";
  align-items: start;
}

/* ---------------------------------------------------------------- similar */
.li-bar { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0; }
.li-chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 0; }
.li-chip {
  display: inline-flex; align-items: center; gap: 2px; padding: 1px 2px 1px 8px; max-width: 100%;
  background: rgba(78, 161, 255, .14); border: 1px solid var(--accent); border-radius: 11px;
}
.li-chip-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.li-chip-x { padding: 0 6px; border: 0; background: none; color: var(--dim); font-size: 14px; line-height: 18px; }
.li-chip-x:hover:not(:disabled) { color: var(--text); background: rgba(255, 255, 255, .1); }
.li-chip-none { color: var(--dim); }
.li-sim-multi { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; }
.li-sim-picker { display: flex; flex-direction: column; gap: 4px; padding: 6px; background: var(--bg); border: 1px solid var(--line); border-radius: 5px; }
.li-sim-list { max-height: 220px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #4a4d55 transparent; }
.li-sim-opt {
  display: flex; align-items: baseline; gap: 6px; width: 100%; padding: 3px 6px; font: inherit; text-align: left; cursor: pointer;
  background: none; color: var(--text); border: 0; border-radius: 3px;
}
.li-sim-opt:hover { background: rgba(255, 255, 255, .06); }
.li-sim-opt.on { background: rgba(78, 161, 255, .18); }
.li-sim-check { flex: none; width: 12px; color: var(--accent); }
.li-sim-name { min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.li-sim-sub { flex: none; color: var(--dim); font-size: 10px; }
.li-sim-more { color: var(--dim); font-size: 11px; }
.li-sim-more:empty { display: none; }
.li-sim-found { display: flex; flex-direction: column; gap: 4px; }
.li-sim-found:empty { display: none; }
.li-det { display: flex; align-items: center; gap: 8px; padding: 3px 6px; background: var(--bg); border-radius: 4px; }
.li-det-text { min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.li-det-state { flex: none; color: var(--ok); font-size: 11px; }
.li-det-done .li-det-text { color: var(--dim); }

/* ---------------------------------------------------------------- solo, actions, group */
.li-solo { display: flex; flex-direction: column; gap: 6px; padding-top: 4px; }
.li-solo-row { display: flex; align-items: center; gap: 8px; }
.li-solo-row .le-select { flex: 1 1 auto; max-width: 240px; }
.li-solo-label { flex: none; width: 36px; color: var(--dim); }
.li-actions { display: flex; flex-direction: column; gap: 6px; padding-top: 4px; }
.li-mixed { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.li-opened { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding-top: 4px; }
.li-opener { display: flex; align-items: center; gap: 8px; max-width: 100%; }
.li-opener-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }