/* Spreadsheets sidebar: a left column beside the grid. Collapsed, it keeps only its toggle strip. */
.mid { display: flex; flex: 1; min-height: 0; min-width: 0; }
.side { position: relative; display: flex; flex-direction: column; flex: none; width: 184px; min-height: 0; background: var(--panel); border-right: 1px solid var(--line); overflow: hidden; }
.side.collapsed { width: 28px; }
.side-toggle { font: 16px/1 var(--font-ui); color: var(--dim); background: transparent; border: 0; border-bottom: 1px solid var(--line); width: 100%; height: 26px; cursor: pointer; flex: none; }
.side-toggle:hover { background: var(--hover); color: var(--fg); }
.side-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.side-body { display: flex; flex-direction: column; gap: 14px; padding: 10px 8px 14px; min-height: 0; flex: 1; overflow-y: auto; }
.side.collapsed .side-body { display: none; }
.side-sec { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.side-h { margin: 0 2px 2px; font: 600 11px/1.2 var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.side-sub { margin: 8px 2px 2px; font: 600 12px/1.2 var(--font-ui); color: var(--dim); }
.side-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.side-list li[hidden] { display: none; }
.side-item { display: block; width: 100%; font: 12px/1.3 var(--font-ui); color: var(--fg); text-align: left; background: transparent; border: 1px solid transparent; border-radius: 5px; padding: 4px 6px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-item:hover { background: var(--hover); }
.side-item.on { background: var(--accent-soft); color: var(--accent); }
.side-item:focus-visible, .side-act:focus-visible, .side-search:focus-visible { outline: 2px solid var(--accent); outline-offset: -1px; }
.side-fn-b { font-family: var(--mono); font-size: 11px; }
.side-act { font: 12px/1.3 var(--font-ui); color: var(--fg); background: var(--input); border: 1px solid var(--line-2); border-radius: 5px; padding: 4px 8px; cursor: pointer; text-align: left; }
.side-act:hover { background: var(--hover); }
.side-search { font: 12px var(--font-ui); color: var(--fg); background: var(--input); border: 1px solid var(--line-2); border-radius: 5px; padding: 4px 6px; width: 100%; box-sizing: border-box; }
.side-fns { max-height: 46vh; overflow-y: auto; }
.side-empty { display: block; padding: 4px 6px; font-size: 11px; color: var(--faint); }
.side-fn { min-height: 0; }
/* a phone: the column is its toggle strip, and the body a drawer from the start edge (shared/ui/sheet.js, sidebar.js) */
@media (max-width: 720px) {
  .side, .side.collapsed { width: 28px; }
  .side.collapsed .side-body { display: flex; }
  .side-toggle { height: 40px; font-size: 20px; }
  .side-body { --ssh-z: 950; }
}