/* ============================================================================
   Buttons
   ----------------------------------------------------------------------------
   A single resting style is shared by .btn and every real form button so the
   app looks consistent even where no variant class is applied.

   Convention: neutral buttons use this shared resting style; .btn-primary is
   reserved for the one main workflow action (including Save on a standalone
   new/edit form). Embedded settings/status Save controls stay neutral so they
   do not compete with the page workflow. .btn-danger marks destructive actions.
   Cancel is a link when it navigates away and a neutral button in a modal.

   The bare element selectors are wrapped in :where() so they carry ZERO
   specificity. This matters: `input[type="submit"]` is specificity (0,1,1) and
   would otherwise outrank a `.btn-primary` (0,1,0) class on `<input>` submits.
   With :where(), variant classes (.btn-primary, .btn-danger) and context rules
   reliably win, while `.btn` keeps real specificity so it beats element rules
   like `a { color }` for link-buttons.
   ============================================================================ */

@layer components {
  .btn,
  :where(button, input[type="submit"], input[type="reset"]) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    padding: var(--space-2) var(--space-3);
    color: var(--text-primary);
    background: var(--bg-primary);
    border: 0.5px solid var(--border-strong);
    border-radius: var(--radius-md);
    cursor: pointer;
    text-decoration: none;
    transition: background var(--speed-fast) var(--ease-out),
                border-color var(--speed-fast) var(--ease-out),
                opacity var(--speed-fast) var(--ease-out),
                transform var(--speed-fast) var(--ease-out);
  }

  /* Hover/press are gated on :not(:disabled) (inside :where so specificity
     stays (0,2,0) and variant :hover rules below still win the tie). Forcing
     the background BACK on :disabled:hover instead would sit at (0,3,0) and
     clobber .btn-primary's inverted background, leaving light-on-light text. */
  .btn:hover:where(:not(:disabled)),
  :where(button, input[type="submit"], input[type="reset"]):hover:where(:not(:disabled)) { background: var(--bg-tertiary); text-decoration: none; }

  /* Press feedback lands on pointer-down, not release: a slight scale reads
     as the button giving under the finger the instant it's touched. */
  .btn:active:where(:not(:disabled)),
  :where(button, input[type="submit"], input[type="reset"]):active:where(:not(:disabled)) { transform: scale(0.97); }

  .btn:disabled,
  :where(button, input[type="submit"], input[type="reset"]):disabled { opacity: 0.45; cursor: not-allowed; }

  /* --- Variants ---------------------------------------------------------- */
  .btn-primary {
    background: var(--text-primary);
    color: var(--bg-primary);
    border-color: var(--text-primary);
  }
  .btn-primary:hover { background: var(--text-primary); opacity: 0.9; }
  /* The global ::selection paints text-primary text over a 14%-alpha accent
     tint — on this button's text-primary background the selected label is
     invisible in both themes, so give selection an opaque, inverted paint. */
  .btn-primary::selection,
  .btn-primary ::selection { background: var(--bg-tertiary); color: var(--text-primary); }

  .btn-danger {
    color: var(--danger-text);
    border-color: var(--danger-border);
    background: var(--bg-primary);
  }
  .btn-danger:hover { background: var(--danger-bg); }

  .btn-small { font-size: 11px; padding: var(--space-1) var(--space-2); }

  /* Keep inline button_to forms from forcing a line break. */
  form.button_to { display: inline-block; }

  /* --- Segmented control -------------------------------------------------- */
  /* A bordered track of mutually exclusive options, the chosen one on a
     quietly raised tile. A selection is state, not an action, so segments
     never take the primary treatment reserved for the page's main workflow
     button. Button segments (the theme switch) mark the choice with
     aria-pressed; link segments (the billing presentment rows) with
     aria-current. */
  .segmented {
    display: inline-flex;
    gap: 2px;
    padding: 2px;
    background: var(--bg-primary);
    border: 0.5px solid var(--border);
    border-radius: var(--radius-md);
  }
  .segmented-opt {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.2;
    white-space: nowrap;
    padding: 5px 10px;
    border: none;
    background: none;
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
  }
  .segmented-opt:hover { background: none; color: var(--text-primary); text-decoration: none; }
  /* Declared after :hover (same specificity) so pointing at the selected
     segment doesn't strip its tile. */
  .segmented-opt[aria-pressed="true"],
  .segmented-opt[aria-current] {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    font-weight: 500;
    box-shadow: 0 0 0 0.5px var(--border);
  }
}