/* The explorer: header actions, the file tree and its footer, the drop highlight, and at phone
   width the drawer the shell opens. */
.explorer { display: flex; flex-direction: column; min-height: 0; background: var(--panel); border-right: 1px solid var(--line); }
.explorer.drop { box-shadow: inset 0 0 0 2px var(--accent-line); }
.ex-head { display: flex; align-items: center; justify-content: space-between; height: 35px; padding: 0 8px 0 14px; font: 600 11px/1 var(--sans); letter-spacing: .09em; text-transform: uppercase; color: var(--fg-3); flex: none; }
.ex-head .ex-actions { display: flex; gap: 2px; }
#tree { overflow: auto; flex: 1; padding: 2px 0 12px; }
.tree-row { display: flex; align-items: center; gap: 5px; width: 100%; height: 24px; padding: 0 10px 0 calc(8px + var(--depth, 0) * 14px); text-align: left; color: var(--fg-2); white-space: nowrap; }
.tree-row:hover { background: var(--hover); color: var(--fg); }
.tree-row.is-active { background: var(--accent-soft); color: var(--fg); box-shadow: inset 2px 0 0 var(--accent); }
.tree-row.is-root { font-weight: 600; color: var(--fg); height: 28px; margin-top: 4px; }
.tree-row .chev { width: 12px; flex: none; display: grid; place-items: center; color: var(--fg-3); }
.tree-row .chev svg { width: 12px; height: 12px; transition: transform .12s; }
.tree-row .chev.open svg { transform: rotate(90deg); }
.tree-name { overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.tree-meta { font: 11px var(--mono); color: var(--fg-3); }
.tree-empty { padding: 2px 14px 4px 44px; font-size: 12px; color: var(--fg-3); }
.ex-foot { flex: none; border-top: 1px solid var(--line); padding: 10px 14px; font-size: 12px; color: var(--fg-3); }
.ex-foot b { color: var(--fg-2); font-weight: 500; }

@media (max-width: 760px) {
  .explorer { position: fixed; z-index: 40; top: 44px; bottom: 26px; left: 0; width: min(86vw, 320px); transform: translateX(-102%); transition: transform .18s; box-shadow: var(--shadow); }
  .explorer.open { transform: none; }
}