/* ============================================================
   The Works viewport density (html[data-bb-density])
   Author: Dave Greenlaw
   Driven by js/works-density.js — shrinks chrome as usable
   viewport shrinks (window resize, browser UI, Ctrl/⌘+zoom).
   Tiers: comfortable (default) | cozy | compact | dense
============================================================ */

html {
  --bb-density-sidebar: 260px;
  --bb-density-detail: 260px;
  --bb-density-mode-pad-y: 8px;
  --bb-density-mode-pad-x: 12px;
  --bb-density-mode-gap: 6px;
  --bb-density-mode-font: 13px;
  --bb-density-row-pad-y: 0.35rem;
  --bb-density-filter-font: 0.9rem;
  --bb-density-chrome-scale: 1;
}

html[data-bb-density="cozy"] {
  --bb-density-sidebar: 228px;
  --bb-density-detail: 232px;
  --bb-density-mode-pad-y: 6px;
  --bb-density-mode-pad-x: 10px;
  --bb-density-mode-gap: 4px;
  --bb-density-mode-font: 12.5px;
  --bb-density-row-pad-y: 0.28rem;
  --bb-density-filter-font: 0.85rem;
}

html[data-bb-density="compact"] {
  --bb-density-sidebar: 200px;
  --bb-density-detail: 200px;
  --bb-density-mode-pad-y: 4px;
  --bb-density-mode-pad-x: 8px;
  --bb-density-mode-gap: 3px;
  --bb-density-mode-font: 12px;
  --bb-density-row-pad-y: 0.2rem;
  --bb-density-filter-font: 0.8rem;
}

html[data-bb-density="dense"] {
  --bb-density-sidebar: 176px;
  --bb-density-detail: 180px;
  --bb-density-mode-pad-y: 3px;
  --bb-density-mode-pad-x: 6px;
  --bb-density-mode-gap: 2px;
  --bb-density-mode-font: 11.5px;
  --bb-density-row-pad-y: 0.12rem;
  --bb-density-filter-font: 0.76rem;
}

/* ----- Mode bar / global chrome ----- */
html[data-bb-density="cozy"] .mode-bar,
html[data-bb-density="compact"] .mode-bar,
html[data-bb-density="dense"] .mode-bar {
  padding: var(--bb-density-mode-pad-y) var(--bb-density-mode-pad-x);
  gap: var(--bb-density-mode-gap);
  row-gap: var(--bb-density-mode-gap);
}

html[data-bb-density="cozy"] .mode-btn,
html[data-bb-density="compact"] .mode-btn,
html[data-bb-density="dense"] .mode-btn {
  font-size: var(--bb-density-mode-font);
  padding: 4px 8px;
}

html[data-bb-density="compact"] .mode-btn--has-hotkey,
html[data-bb-density="dense"] .mode-btn--has-hotkey {
  gap: 0.2rem;
  padding-left: 0.4rem;
  padding-right: 0.45rem;
}

html[data-bb-density="dense"] .mode-btn__hotkey {
  display: none;
}

html[data-bb-density="compact"] .mode-bar-alpha-sticker,
html[data-bb-density="dense"] .mode-bar-alpha-sticker {
  font-size: 0.55rem;
  padding: 3px 5px;
}

html[data-bb-density="cozy"] .bb-look-controls,
html[data-bb-density="compact"] .bb-look-controls,
html[data-bb-density="dense"] .bb-look-controls {
  gap: 4px;
}

html[data-bb-density="compact"] .bb-look-btn,
html[data-bb-density="dense"] .bb-look-btn {
  min-height: 28px;
  padding: 2px 6px;
  font-size: 0.78rem;
}

/* ----- Archive-style sidebars + detail panes ----- */
html[data-bb-density="cozy"] .archive-sidebar,
html[data-bb-density="compact"] .archive-sidebar,
html[data-bb-density="dense"] .archive-sidebar {
  width: var(--bb-density-sidebar);
  min-width: var(--bb-density-sidebar);
  max-width: var(--bb-density-sidebar);
}

html[data-bb-density="cozy"] .detail-panel,
html[data-bb-density="compact"] .detail-panel,
html[data-bb-density="dense"] .detail-panel {
  width: var(--bb-density-detail);
  min-width: var(--bb-density-detail);
  max-width: var(--bb-density-detail);
  padding: 8px;
}

html[data-bb-density="dense"] .detail-panel {
  padding: 6px;
}

html[data-bb-density="cozy"] .sidebar-title,
html[data-bb-density="compact"] .sidebar-title,
html[data-bb-density="dense"] .sidebar-title {
  font-size: calc(var(--bb-density-filter-font) + 0.1rem);
}

html[data-bb-density="compact"] .sidebar-create-btn,
html[data-bb-density="dense"] .sidebar-create-btn,
html[data-bb-density="compact"] .lens-toggle-btn,
html[data-bb-density="dense"] .lens-toggle-btn,
html[data-bb-density="compact"] .archive-lens-select,
html[data-bb-density="dense"] .archive-lens-select {
  font-size: var(--bb-density-filter-font);
  padding: 3px 6px;
  min-height: 28px;
}

html[data-bb-density="cozy"] .sidebar-search input,
html[data-bb-density="compact"] .sidebar-search input,
html[data-bb-density="dense"] .sidebar-search input,
html[data-bb-density="cozy"] .sidebar-search select,
html[data-bb-density="compact"] .sidebar-search select,
html[data-bb-density="dense"] .sidebar-search select {
  font-size: var(--bb-density-filter-font);
  padding: 4px 6px;
  min-height: 28px;
}

html[data-bb-density="dense"] .sidebar-header--stacked {
  gap: 4px;
}

html[data-bb-density="compact"] .sidebar-header-actions,
html[data-bb-density="dense"] .sidebar-header-actions {
  gap: 4px;
}

/* Tree / list rows */
html[data-bb-density="cozy"] .archive-tree .tree-node,
html[data-bb-density="compact"] .archive-tree .tree-node,
html[data-bb-density="dense"] .archive-tree .tree-node,
html[data-bb-density="cozy"] .archive-tree .archive-node,
html[data-bb-density="compact"] .archive-tree .archive-node,
html[data-bb-density="dense"] .archive-tree .archive-node {
  padding-top: var(--bb-density-row-pad-y);
  padding-bottom: var(--bb-density-row-pad-y);
  font-size: var(--bb-density-filter-font);
}

html[data-bb-density="compact"] .sidebar-footer .pill-btn,
html[data-bb-density="dense"] .sidebar-footer .pill-btn,
html[data-bb-density="compact"] .sidebar-actions .pill-btn,
html[data-bb-density="dense"] .sidebar-actions .pill-btn {
  font-size: 0.75rem;
  padding: 3px 7px;
  min-height: 26px;
}

html[data-bb-density="dense"] .sidebar-tree-toolbar {
  gap: 3px;
}

/* Main headers / filter bars */
html[data-bb-density="cozy"] .archive-main-header,
html[data-bb-density="compact"] .archive-main-header,
html[data-bb-density="dense"] .archive-main-header,
html[data-bb-density="cozy"] .photo-album-main-header,
html[data-bb-density="compact"] .photo-album-main-header,
html[data-bb-density="dense"] .photo-album-main-header,
html[data-bb-density="cozy"] .teams-main-header,
html[data-bb-density="compact"] .teams-main-header,
html[data-bb-density="dense"] .teams-main-header {
  gap: 6px;
}

html[data-bb-density="compact"] .archive-main-header .pill-btn,
html[data-bb-density="dense"] .archive-main-header .pill-btn,
html[data-bb-density="compact"] .photo-album-main-header .pill-btn,
html[data-bb-density="dense"] .photo-album-main-header .pill-btn,
html[data-bb-density="compact"] .teams-header-actions .pill-btn,
html[data-bb-density="dense"] .teams-header-actions .pill-btn {
  font-size: var(--bb-density-filter-font);
  padding: 3px 7px;
  min-height: 28px;
}

html[data-bb-density="dense"] .breadcrumb {
  font-size: 0.8rem;
}

/* Dashboard filters / chips / lists */
html[data-bb-density="cozy"] .dashboard-top,
html[data-bb-density="compact"] .dashboard-top,
html[data-bb-density="dense"] .dashboard-top {
  gap: 8px;
}

html[data-bb-density="compact"] .dash-card-size,
html[data-bb-density="dense"] .dash-card-size,
html[data-bb-density="compact"] .dashboard-summary-chip,
html[data-bb-density="dense"] .dashboard-summary-chip {
  font-size: var(--bb-density-filter-font);
}

html[data-bb-density="compact"] .dash-timeline-item,
html[data-bb-density="dense"] .dash-timeline-item,
html[data-bb-density="compact"] .dash-icon-day-list__row,
html[data-bb-density="dense"] .dash-icon-day-list__row {
  padding-top: var(--bb-density-row-pad-y);
  padding-bottom: var(--bb-density-row-pad-y);
  font-size: var(--bb-density-filter-font);
}

/* Forum / shared filter chrome */
html[data-bb-density="compact"] .pf-create-bar,
html[data-bb-density="dense"] .pf-create-bar,
html[data-bb-density="compact"] .pf-shared-author-filter,
html[data-bb-density="dense"] .pf-shared-author-filter {
  font-size: var(--bb-density-filter-font);
}

html[data-bb-density="compact"] .pf-list-card,
html[data-bb-density="dense"] .pf-list-card {
  padding-top: calc(var(--bb-density-row-pad-y) + 0.15rem);
  padding-bottom: calc(var(--bb-density-row-pad-y) + 0.15rem);
}

/* Floating Organizer / Journal / Tasks side lists */
html[data-bb-density="compact"] .journal-sidebar,
html[data-bb-density="dense"] .journal-sidebar,
html[data-bb-density="compact"] .tasks-sidebar,
html[data-bb-density="dense"] .tasks-sidebar {
  max-width: min(220px, 34vw);
}

html[data-bb-density="dense"] .journal-sidebar,
html[data-bb-density="dense"] .tasks-sidebar {
  max-width: min(180px, 32vw);
}

html[data-bb-density="compact"] .journal-entry-item,
html[data-bb-density="dense"] .journal-entry-item,
html[data-bb-density="compact"] .tasks-entry-list li,
html[data-bb-density="dense"] .tasks-entry-list li {
  padding-top: var(--bb-density-row-pad-y);
  padding-bottom: var(--bb-density-row-pad-y);
  font-size: var(--bb-density-filter-font);
}

/* Smooth chrome size changes when not reduced-motion */
@media (prefers-reduced-motion: no-preference) {
  html[data-bb-density] .archive-sidebar,
  html[data-bb-density] .detail-panel,
  html[data-bb-density] .mode-bar {
    transition:
      width 0.16s ease,
      min-width 0.16s ease,
      max-width 0.16s ease,
      padding 0.16s ease,
      gap 0.16s ease;
  }
}