/* The puzzle explorer drawer at the bottom of the animator (anim.html):
   a slim collapsed bar that expands into facet rail + SQL + results.
   Colors come from the shared tokens in burr-theme.css. */

#query-drawer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    background: var(--panel-strong);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--panel-border);
    box-shadow: var(--shadow);
    font-size: 12px;
    color: var(--text);
}

/* Header bar (always visible) */
#query-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 14px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text);
    font-family: var(--font-ui);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: left;
}
#query-toggle:hover { background: var(--field-strong); }
/* Mouse interaction leaves no focus ring; keyboard focus keeps one.
   The header also drag-resizes the drawer (touch-action lets pointer
   moves through on touch screens). */
#query-toggle:focus { outline: none; }
#query-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
#query-toggle { touch-action: none; }
.query-caret { display: inline-block; transition: transform 0.15s; }
#query-drawer:not(.collapsed) .query-caret { transform: rotate(90deg); }

/* Expanded body: facet rail | SQL + results */
#query-body {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    /* Pin the single row to the drawer height: auto rows size to their
       content, which would push the results table past 44vh and clip it
       at the viewport bottom instead of letting it scroll. */
    grid-template-rows: minmax(0, 1fr);
    /* 44vh is the pre-drag default; dragging the header sets an inline
       pixel height. */
    height: 44vh;
    border-top: 1px solid var(--line-soft);
}
#query-body > * { min-height: 0; }
#query-drawer.collapsed #query-body { display: none; }

/* The drawer publishes its footprint as --stage-inset-bottom: the
   puzzle views size against it (BurrUIState.stageHeight), the iso
   container stops above it, and the top-anchored panels shrink to the
   remaining stage. */
#iso-container { bottom: var(--stage-inset-bottom, 0px); }
#sidebar,
#move-panel { max-height: calc(100vh - var(--stage-inset-bottom, 0px) - 40px); }

/* ── Facet rail ── */
#query-facets {
    border: none;
    margin: 0;
    padding: 4px 10px 10px;
    overflow-y: auto;
    border-right: 1px solid var(--line-soft);
    min-width: 0;
}
#query-facets:disabled { opacity: 0.45; }
.facet-heading {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--muted);
    margin: 8px 0 4px;
}
.facet-row {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 3px;
}
.facet-row label {
    flex: 1;
    margin: 0;
    font-size: 12px;
    color: var(--text);
    white-space: nowrap;
}
.facet-row input[type="number"] {
    width: 52px;
    padding: 2px 4px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--field);
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 11px;
}
.facet-row input[type="text"] {
    width: 120px;
    padding: 2px 6px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--field);
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 16px;      /* the piece-field overlay mirrors this */
}
.facet-row select {
    width: 60px;
    padding: 1px 2px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--field);
    color: var(--text);
    font-size: 11px;
}
.facet-row input:focus, .facet-row select:focus {
    outline: none;
    border-color: var(--accent);
}
/* Spinner arrows respect the natural bounds; typed values outside them
   still run, but read as suspect. */
.facet-row input[type="number"]:out-of-range {
    color: var(--red);
    border-color: var(--red);
}

/* ── Piece ID fields: overlay marks IDs outside the 837 valid pieces ── */
.piece-wrap {
    position: relative;
    display: inline-block;
}
.piece-wrap input {
    position: relative;
    background: transparent;
    color: transparent;
    caret-color: var(--text);
    z-index: 1;
}
.piece-highlight {
    position: absolute;
    inset: 1px;                 /* stay inside the input's border */
    padding: 2px 6px;
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 16px;
    white-space: pre;
    overflow: hidden;
    color: var(--text);
    background: var(--field);
    border-radius: 4px;
    pointer-events: none;
}
.piece-highlight .bad { color: var(--red); font-weight: 600; }
.piece-picker-btn { padding: 0 6px; font-size: 12px; line-height: 18px; }

/* The [+] popup: filterable list of the 837 canonical pieces */
#piece-picker {
    position: fixed;
    z-index: 50;
    width: 232px;
    background: var(--panel-solid);
    border: 1px solid var(--panel-border);
    border-radius: 8px;
    box-shadow: var(--shadow);
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
#piece-picker input {
    padding: 3px 6px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--field);
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 11px;
}
#piece-picker input:focus { outline: none; border-color: var(--accent); }
.piece-picker-list {
    max-height: 200px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
.piece-picker-list button {
    text-align: left;
    padding: 1px 6px;
    border: none;
    background: none;
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 11px;
    cursor: pointer;
    border-radius: 4px;
}
.piece-picker-list button:hover { background: var(--accent-soft); }

/* ── SQL row ── */
#query-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
#query-sql-row {
    display: flex;
    gap: 8px;
    padding: 8px 10px 4px;
    align-items: stretch;
}
/* One code box: fixed SELECT head, editable clauses, managed LIMIT tail */
#query-sql-frame {
    flex: 1;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--field);
    overflow: hidden;
}
#query-sql-frame:focus-within { border-color: var(--accent); }
.sql-fixed {
    padding: 3px 8px;
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 1.45;
    color: var(--muted);
    background: var(--field-strong);
    user-select: text;
}
#query-sql-head { border-bottom: 1px solid var(--line-soft); }
#query-sql-tail { border-top: 1px solid var(--line-soft); }
#query-sql {
    resize: vertical;
    min-height: 2.5em;
    padding: 3px 8px;
    border: none;
    outline: none;
    background: transparent;
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 1.45;
}
#query-side {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: stretch;
    justify-content: flex-start;
}
#query-custom-badge {
    padding: 2px 8px;
    border-radius: 10px;
    background: var(--orange-soft);
    color: var(--orange);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
    cursor: help;
}
#query-custom-badge.hidden { display: none; }
#query-reset {
    padding: 3px 10px;
    font-size: 11px;
}

/* ── Status line + pagination ── */
#query-statusbar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px 4px;
}
#query-status {
    color: var(--muted);
    font-size: 11px;
    min-height: 16px;
    /* Wide enough for "rows 201–300 of 9999": the pager buttons must not
       drift as the numbers change. Tabular digits keep equal-length
       ranges equal-width; only error text may exceed and push. */
    min-width: 24ch;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
#query-status.error { color: var(--red); }
#query-prev, #query-next {
    padding: 0 8px;
    font-size: 12px;
    line-height: 16px;
}
#query-prev:disabled, #query-next:disabled { opacity: 0.35; cursor: default; }

/* ── Results table ── */
#query-table-wrap {
    flex: 1;
    overflow: auto;
    border-top: 1px solid var(--line-soft);
}
#query-table {
    border-collapse: collapse;
    /* Fixed layout + the colgroup the drawer emits: column widths are
       set per column, never by whichever rows happen to be on screen —
       sorting and paging must not reflow the table. The name column
       absorbs the slack; below min-width the wrapper scrolls. */
    table-layout: fixed;
    width: 100%;
    min-width: 760px;
    font-size: 11px;
}
#query-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--bg-accent);
    color: var(--muted);
    font-weight: 600;
    text-align: left;
    padding: 3px 8px;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    user-select: none;
}
#query-table th.sortable { cursor: pointer; }
#query-table th.sortable:hover { color: var(--text); }
/* Fixed-width slot for the ▲/▼(n) marker so sorting never reflows */
#query-table th .sort-ind {
    display: inline-block;
    width: 2.4ch;
    margin-left: 2px;
    color: var(--accent-text);
    font-style: normal;
}
#query-table td {
    padding: 1px 8px;
    border-bottom: 1px solid var(--line-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Vertical separators tie values to their columns */
#query-table td + td, #query-table th + th {
    border-left: 1px solid var(--line-soft);
}
/* Columns present only because the query mentions them */
#query-table th.extra { color: var(--accent-text); font-style: italic; }
#query-table td.extra {
    background: color-mix(in srgb, var(--accent-soft) 35%, transparent);
}
#query-table td.num { font-variant-numeric: tabular-nums; }
#query-table td.mono { font-family: var(--font-mono); }
#query-table td.bool { text-align: center; }
#query-table td.null { color: var(--faint); }
#query-table tr.pickable { cursor: pointer; }
#query-table tr.pickable:hover { background: var(--field-strong); }
#query-table tr.selected,
#query-table tr.selected:hover { background: var(--accent-soft); }