/* =============================================================================
   COMPONENT: bm-toggle — the pinned "Had a BM today?" row on Today (FEA-0027).
   Prototype: round success icon, title + meta line, pill Logged / Log action.
   ========================================================================== */
@layer components {
  .today-logging { margin-block-end: var(--space-md); }

  .bm-toggle {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
  }

  .bm-toggle__icon {
    border-radius: 50%;
    inline-size: 2.5rem;
    block-size: 2.5rem;
  }

  .bm-toggle__body {
    flex: 1;
    min-inline-size: 0;
    display: grid;
    gap: var(--space-3xs);
  }

  .bm-toggle__title {
    font-weight: var(--weight-semibold);
    line-height: var(--leading-snug);
  }

  .bm-toggle__meta {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    line-height: var(--leading-normal);
  }

  .bm-toggle__sep { margin-inline: var(--space-2xs); }

  .bm-toggle__action { flex: none; }

  .bm-toggle__log {
    appearance: none;
    border: var(--border-width) solid var(--color-border-strong);
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    line-height: 1;
    min-block-size: var(--touch-target);
    padding-inline: var(--space-lg);
    cursor: pointer;
  }

  .bm-toggle__log:hover { border-color: var(--accent); color: var(--accent); }

  .bm-toggle__pill,
  button.bm-toggle__pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    border: var(--border-width) solid var(--status-success-fg);
    border-radius: var(--radius-pill);
    background: var(--status-success-bg);
    color: var(--status-success-fg);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    line-height: 1;
    min-block-size: var(--touch-target);
    padding-inline: var(--space-md);
    cursor: pointer;
    text-decoration: none;
  }

  button.bm-toggle__pill:hover { filter: brightness(0.97); }
}