/*
 * BeatHelper readable surfaces v17.6.4
 * Rail parity experiment:
 * the neutral translucent material that the side nav already uses below 1100px
 * becomes the canonical readable surface at every desktop width.
 */
:root{
  --bh-readable-surface:rgba(255,255,255,.05);
  --bh-readable-surface-2:rgba(255,255,255,.07);
  --bh-readable-nested:rgba(255,255,255,.04);
  --bh-readable-border:rgba(255,255,255,.09);
  --bh-readable-shadow:0 18px 46px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.025);
  --bh-readable-blur:blur(18px);
}

/*
 * Keep the side rail on ONE material across desktop breakpoints.
 * This intentionally overrides the >=1100px Phase 14 rgba(9,13,21,.92) rail.
 */
@media(min-width:768px){
  .screen .nav{
    background:var(--bh-readable-surface)!important;
    border-color:var(--bh-readable-border)!important;
    box-shadow:var(--bh-readable-shadow)!important;
    backdrop-filter:var(--bh-readable-blur)!important;
    -webkit-backdrop-filter:var(--bh-readable-blur)!important;
  }
}

/* Main readable surfaces use the same material as the side rail. */
.screen[data-page="home"] .search,
.screen[data-page="home"] .home-recent-grid .row,
.screen[data-page="home"] .home-quick-grid .quick,
.screen[data-page="home"] .user-stats,
.screen[data-page="tools"] .tools-search,
.screen[data-page="tools"] .tool-list-item,
.screen[data-page="tools"] .tools-empty,
.screen[data-page="workspace"] .tool-workspace-head,
.screen[data-page="workspace"] .tool-form-card,
.screen[data-page="workspace"] .tool-result-card,
.screen[data-page="workspace"] .tool-history-card,
.screen[data-page="crm"] .tools-search,
.screen[data-page="crm"] .crm-kpi,
.screen[data-page="crm"] .crm-chart,
.screen[data-page="crm"] .crm-filter:not(.on),
.screen[data-page="crm"] .crm-folder-chip:not(.on),
.screen[data-page="crm"] .crm-create-action,
.screen[data-page="crm"] .crm-artist,
.screen[data-page="crm"] .crm-page:not(.on),
.screen[data-page="crm"] .crm-empty.visible,
.screen[data-page="profile"] .profile-hero,
.screen[data-page="profile"] .profile-plan,
.screen[data-page="profile"] .profile-item,
.screen[data-page="mailings"] .card,
.screen[data-page="mailings"] .row,
.screen[data-page="mailings"] .btn.ghost{
  background:var(--bh-readable-surface)!important;
  border-color:var(--bh-readable-border)!important;
  box-shadow:var(--bh-readable-shadow)!important;
  backdrop-filter:var(--bh-readable-blur)!important;
  -webkit-backdrop-filter:var(--bh-readable-blur)!important;
}

/* Pressed state stays in the same neutral family. */
.screen[data-page="tools"] .tool-list-item:active,
.screen[data-page="workspace"] .tool-form-card:active,
.screen[data-page="crm"] .crm-artist:active,
.screen[data-page="profile"] .profile-item:active{
  background:var(--bh-readable-surface-2)!important;
}

/* Nested controls: only a tiny neutral lift. */
.screen[data-page="home"] .analytics-scope,
.screen[data-page="home"] .analytics-periods button:not(.on),
.screen[data-page="home"] .user-stat-icon,
.screen[data-page="tools"] .tool-list-icon,
.screen[data-page="workspace"] .tool-note,
.screen[data-page="workspace"] .tool-settings-row,
.screen[data-page="workspace"] .tool-account,
.screen[data-page="workspace"] .tool-result-row,
.screen[data-page="crm"] .crm-kpi-icon,
.screen[data-page="crm"] .crm-create-icon,
.screen[data-page="crm"] .crm-avatar,
.screen[data-page="crm"] .crm-chart-plot,
.screen[data-page="profile"] .profile-item-icon{
  background:var(--bh-readable-nested)!important;
}

@media(max-width:767px){
  :root{
    --bh-readable-surface:rgba(255,255,255,.055);
    --bh-readable-shadow:0 12px 32px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.025);
  }
}


/* v17.6.4 — control groups sit on the same material as the side rail. */
.screen[data-page="tools"] .tool-filter-row,
.screen[data-page="crm"] .crm-filters,
.screen[data-page="crm"] .crm-folders,
.screen[data-page="crm"] .crm-chart-controls{
  background:var(--bh-readable-surface)!important;
  border:1px solid var(--bh-readable-border)!important;
  box-shadow:var(--bh-readable-shadow)!important;
  backdrop-filter:var(--bh-readable-blur)!important;
  -webkit-backdrop-filter:var(--bh-readable-blur)!important;
}
.screen[data-page="tools"] .tool-filter-row,
.screen[data-page="crm"] .crm-filters{
  padding:8px!important;
  border-radius:14px!important;
}
.screen[data-page="crm"] .crm-folders{
  padding:10px!important;
  border-radius:16px!important;
}
.screen[data-page="crm"] .crm-chart-controls{
  border-radius:18px!important;
}

/* Pills themselves stay neutral; selected state keeps the existing accent. */
.screen[data-page="tools"] .tool-filter:not(.on),
.screen[data-page="crm"] .crm-filter:not(.on),
.screen[data-page="crm"] .crm-folder-chip:not(.on),
.screen[data-page="crm"] .crm-chart-toggle{
  background:var(--bh-readable-nested)!important;
  border-color:var(--bh-readable-border)!important;
}

/* Back control on every tool/workspace header gets an explicit rail-material plate. */
.screen .topbar .back{
  background:var(--bh-readable-surface)!important;
  border-color:var(--bh-readable-border)!important;
  box-shadow:0 10px 28px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.025)!important;
  backdrop-filter:var(--bh-readable-blur)!important;
  -webkit-backdrop-filter:var(--bh-readable-blur)!important;
}
.screen .topbar .back:active{
  background:var(--bh-readable-surface-2)!important;
}