/*
  UI customization layer.
  Put visual experiments here instead of editing app.js. Good candidates:
  - spacing and density
  - color overrides
  - card, button, and panel treatments
  - responsive layout widths
*/

.workspace {
  grid-template-columns:
    var(--sidebar-width)
    minmax(var(--list-min-width), 1fr)
    minmax(var(--detail-min-width), var(--detail-max-width));
  min-height: calc(100vh - var(--topbar-height));
}

.sidebar,
.list-pane,
.detail-pane {
  max-height: calc(100vh - var(--topbar-height));
}

.sidebar,
.list-pane,
.detail-pane,
.page {
  padding: var(--space-page);
}

.page {
  max-width: var(--page-max-width);
}

.panel {
  border-radius: var(--radius-md);
}

button,
input,
select,
textarea,
.entry-card,
.list-item,
.preview {
  border-radius: var(--radius-sm);
}

input:focus,
select:focus,
textarea:focus {
  box-shadow: var(--focus-ring);
}

.export-grid .panel {
  box-shadow: none;
}