/* ===== BUTTONS (Portal UI cleanup 3/4, docs/STYLE-GUIDE.md section 6) =====
   Loaded after sizes.css. Five kinds for new markup: .pb-btn plus one of
   .pb-btn-primary / -secondary / -quiet / -danger / -icon. Tokens only (tokens.css), never per theme.
   The old classes (.btn-primary, .btn-secondary, .btn-danger, .tn-btn, .ft-btn, .c-btn and the other *-btn)
   stay as aliases with their own look; from here they get the shared focus ring and disabled state.
   Order matters: variants, then hover (pointer devices only), then pressed, then focus, then disabled,
   so a state always wins over a variant (same or higher specificity, later in source).
   Secondary hover border uses --pb-focus: --pb-accent is 2.66-3.09 on Light surfaces.
   Specificity note: base.css sets cursor:default with a 0,1,2 selector, so cursor rules here use 0,2,0. */

.pb-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--pb-space-1_5);box-sizing:border-box;
  min-height:var(--pb-hit);min-width:var(--pb-hit);padding:0 var(--pb-space-4);margin:0;
  border:1px solid transparent;border-radius:var(--pb-radius-sm);background:transparent;color:var(--pb-text);
  font-family:inherit;font-size:var(--pb-fs-base);font-weight:600;line-height:1.2;white-space:nowrap;text-decoration:none;
  transition:background-color var(--pb-dur-fast) var(--pb-ease),border-color var(--pb-dur-fast) var(--pb-ease),color var(--pb-dur-fast) var(--pb-ease)
}
.pb-btn:not(:disabled,[aria-disabled="true"]){cursor:pointer}
.pb-btn svg{width:var(--pb-fs-xl);height:var(--pb-fs-xl);flex-shrink:0;stroke:currentColor;fill:none;stroke-width:2}

/* Kinds. Filled kinds darken on hover/press with a shade layer (--pb-btn-shade/-press), so text contrast only goes up. */
.pb-btn-primary{background-color:var(--pb-accent-fill);color:var(--pb-on-accent)}
.pb-btn-secondary{background-color:var(--pb-surface);border-color:var(--pb-border-strong);color:var(--pb-text)}
.pb-btn-quiet{background-color:transparent;color:var(--pb-text)}
.pb-btn-danger{background-color:var(--pb-danger);color:var(--pb-on-danger)}
.pb-btn-icon{padding:0;width:var(--pb-hit);height:var(--pb-hit);background-color:transparent;color:var(--pb-text-muted)}

/* Hover: pointer devices only, never on a disabled button. */
@media (hover:hover){
  .pb-btn-primary:not(:disabled,[aria-disabled="true"]):hover,.pb-btn-danger:not(:disabled,[aria-disabled="true"]):hover{background-image:linear-gradient(var(--pb-btn-shade),var(--pb-btn-shade))}
  .pb-btn-secondary:not(:disabled,[aria-disabled="true"]):hover{border-color:var(--pb-focus);background-color:var(--pb-surface-2)}
  .pb-btn-quiet:not(:disabled,[aria-disabled="true"]):hover,.pb-btn-icon:not(:disabled,[aria-disabled="true"]):hover{background-color:var(--pb-accent-soft);color:var(--pb-text)}
}

/* Pressed (while held) and toggled on (aria-pressed). Same specificity as hover, later, so it wins. */
.pb-btn-primary:not(:disabled,[aria-disabled="true"]):active,.pb-btn-danger:not(:disabled,[aria-disabled="true"]):active,
.pb-btn-primary[aria-pressed="true"]:not(:disabled,[aria-disabled="true"]),.pb-btn-danger[aria-pressed="true"]:not(:disabled,[aria-disabled="true"]){background-image:linear-gradient(var(--pb-btn-press),var(--pb-btn-press))}
.pb-btn-secondary:not(:disabled,[aria-disabled="true"]):active,.pb-btn-quiet:not(:disabled,[aria-disabled="true"]):active,.pb-btn-icon:not(:disabled,[aria-disabled="true"]):active,
.pb-btn-secondary[aria-pressed="true"]:not(:disabled,[aria-disabled="true"]),.pb-btn-quiet[aria-pressed="true"]:not(:disabled,[aria-disabled="true"]),
.pb-btn-icon[aria-pressed="true"]:not(:disabled,[aria-disabled="true"]){background-color:var(--pb-accent-soft-2);color:var(--pb-text)}

/* Focus ring (guide section 7): keyboard only, every button, never removed. Zero-specificity :where() for
   the aliases so a component's own :focus-visible ring still wins; .pb-btn pins it. */
:where(button,[role="button"],input[type="button"],input[type="submit"],input[type="reset"]):focus-visible,
.pb-btn:focus-visible{outline:2px solid var(--pb-focus);outline-offset:2px}

/* Disabled: muted, not-allowed, no hover change (hovers above exclude it). Label stays readable (--pb-text-dim). */
.pb-btn:is(:disabled,[aria-disabled="true"]){background-color:var(--pb-surface-2);background-image:none;border-color:var(--pb-border);color:var(--pb-text-dim);cursor:not-allowed;box-shadow:none}
.pb-btn-quiet:is(:disabled,[aria-disabled="true"]),.pb-btn-icon:is(:disabled,[aria-disabled="true"]){background-color:transparent;border-color:transparent}
:where(button,[role="button"]):is(:disabled,[aria-disabled="true"]){cursor:not-allowed}
.btn-primary:is(:disabled,[aria-disabled="true"]),.btn-secondary:is(:disabled,[aria-disabled="true"]),.btn-danger:is(:disabled,[aria-disabled="true"]){background:var(--pb-surface-2);border-color:var(--pb-border);color:var(--pb-text-dim);cursor:not-allowed;box-shadow:none}
.tn-btn:is(:disabled,[aria-disabled="true"]),.ft-btn:is(:disabled,[aria-disabled="true"]),.c-btn:is(:disabled,[aria-disabled="true"]){color:var(--pb-text-dim);cursor:not-allowed;box-shadow:none}

/* Reduced motion (guide section 7) */
@media (prefers-reduced-motion: reduce){
  .pb-btn,.pb-btn::before,.pb-btn::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important}
}