/* Calm Surface migration 5 -- Business Profiles hub. Scoped to #biz-profiles-panel
   only (strangler-safe). Calm card grid of platforms; each launches an existing
   per-platform view via gotoTab. */

#biz-profiles-panel { font-family: var(--font-family-sans); color: var(--color-text-default); }
#biz-profiles-panel .bp-title {
  font-size: var(--scale-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-strong);
  line-height: var(--font-leading-tight);
  margin: 0 0 var(--space-2);
}
#biz-profiles-panel .bp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: var(--space-2);
}
#biz-profiles-panel .bp-card {
  background: var(--color-surface-1);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--elevation-1);
  padding: var(--space-2);
  display: grid;
  gap: var(--space-1_5);
}
#biz-profiles-panel .bp-card-head {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-text-strong);
}
#biz-profiles-panel .bp-card-head h3 {
  margin: 0;
  font-size: var(--scale-base);
  font-weight: var(--font-weight-semibold);
}
#biz-profiles-panel .bp-links { display: flex; flex-wrap: wrap; gap: var(--space-0_5); }
#biz-profiles-panel .bp-link {
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  background: var(--color-surface-1);
  color: var(--color-accent-primary);
  font-size: var(--scale-sm);
  padding: var(--space-0_5) var(--space-1);
  min-height: 2rem;
  cursor: pointer;
}
#biz-profiles-panel .bp-link:hover { background: var(--color-accent-primary-tint); }
#biz-profiles-panel .bp-empty { color: var(--color-text-muted); }
#biz-profiles-panel :focus-visible {
  outline: var(--focus-ring-width) solid var(--color-border-focus);
  outline-offset: var(--focus-ring-offset);
}

/* Migration 6: inline platform + view switcher (scoped to #biz-switcher-bar). */
#biz-switcher-bar {
  font-family: var(--font-family-sans);
  display: grid;
  gap: var(--space-1);
  margin-block-end: var(--space-2);
}
#biz-switcher-bar .biz-switch {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-0_5);
  padding: var(--space-0_5);
  background: var(--color-surface-sunken);
  border-radius: var(--radius-full);
  width: fit-content;
}
#biz-switcher-bar .biz-seg {
  border: 0;
  background: transparent;
  color: var(--color-text-muted);
  border-radius: var(--radius-full);
  font: inherit;
  font-size: var(--scale-sm);
  padding: var(--space-0_5) var(--space-1_5);
  min-height: var(--size-touch-min);  /* S4: 44px touch target */
  cursor: pointer;
}
#biz-switcher-bar .biz-seg[aria-selected="true"] {
  background: var(--color-surface-1);
  color: var(--color-text-strong);
  box-shadow: var(--elevation-1);
  font-weight: var(--font-weight-medium);
}
#biz-switcher-bar .biz-views {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  border-block-end: 1px solid var(--color-border-subtle);
  padding-block-end: var(--space-0_5);
}
#biz-switcher-bar .biz-view {
  border: 0;
  background: transparent;
  color: var(--color-text-muted);
  font: inherit;
  font-size: var(--scale-sm);
  padding: var(--space-0_5) var(--space-1);
  min-height: var(--size-touch-min);  /* S4: 44px touch target */
  cursor: pointer;
  border-block-end: 2px solid transparent;
}
#biz-switcher-bar .biz-view[aria-selected="true"] {
  color: var(--color-accent-primary);
  border-block-end-color: var(--color-accent-primary);
  font-weight: var(--font-weight-medium);
}
#biz-switcher-bar :focus-visible {
  outline: var(--focus-ring-width) solid var(--color-border-focus);
  outline-offset: var(--focus-ring-offset);
}

/* S4: "Last used" badge -- a non-disruptive cross-session persistence cue marking
   the platform the operator last opened (calm supportive tint; logical auto-margin
   so it pins to the inline end in both LTR + RTL). */
#biz-profiles-panel .bp-recent {
  margin-inline-start: auto;
  font-size: var(--scale-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-accent-primary);
  background: var(--color-accent-primary-tint);
  padding-block: var(--space-0_5);
  padding-inline: var(--space-1);
  border-radius: var(--radius-full);
}

/* S4: platform "More" overflow menu (shows past ~7 platforms). Calm popover,
   logical properties so it anchors + mirrors correctly in RTL; menu items are
   44px touch targets. */
#biz-switcher-bar .biz-switch-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-0_5);
}
#biz-switcher-bar .biz-more { position: relative; }
#biz-switcher-bar .biz-more-btn[aria-expanded="true"] {
  background: var(--color-surface-1);
  color: var(--color-text-strong);
  box-shadow: var(--elevation-1);
}
#biz-switcher-bar .biz-more-menu {
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: calc(100% + var(--space-0_5));
  z-index: 20;
  min-inline-size: 11rem;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-0_5);
  background: var(--color-surface-1);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--elevation-2);
}
#biz-switcher-bar .biz-more-menu[hidden] { display: none; }
#biz-switcher-bar .biz-more-item {
  border: 0;
  background: transparent;
  color: var(--color-text-default);
  text-align: start;
  font: inherit;
  font-size: var(--scale-sm);
  padding-block: var(--space-1);
  padding-inline: var(--space-1_5);
  min-height: var(--size-touch-min);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
#biz-switcher-bar .biz-more-item:hover { background: var(--color-surface-2); }