/* Shared raised surfaces. Offset shadows follow the active color palette. */
:root {
  --raised-edge-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-ink));
  --button-pressed-scale: 0.96;
  --raised-card-shadow: 3px 4px 0 color-mix(in srgb, var(--raised-edge-color) 65%, transparent);
  --raised-pressed-shadow: 0 0 0 var(--raised-edge-color);
}

/* Utility buttons retain the shrink effect. Standard .pt-btn actions are
   styled separately below, so these rules cannot override their shadows. */
:is(.pt-btn, button:not(.info-icon-btn), input[type="submit"], input[type="button"]):not(.action-width-probe, .pt-btn) {
  box-shadow: none;
  transform-origin: center;
  transition: background-color .15s ease, color .15s ease, scale .12s ease;
}
:is(.pt-btn, button:not(.info-icon-btn), input[type="submit"], input[type="button"]):not(.action-width-probe, .pt-btn):hover {
  box-shadow: none;
}
:is(.pt-btn, button:not(.info-icon-btn), input[type="submit"], input[type="button"]):not(.action-width-probe, .pt-btn):active {
  scale: var(--button-pressed-scale);
  box-shadow: none;
}
:is(.pt-btn, button:not(.info-icon-btn), input[type="submit"], input[type="button"]):not(.action-width-probe, .pt-btn):focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  box-shadow: none;
}
:is(.pt-btn, button, input[type="submit"], input[type="button"]):not(.pt-btn--ghost):is(:disabled, .disabled, [aria-disabled="true"]) {
  scale: none;
  box-shadow: none;
}
/* Scale the visible info circle rather than its zero-height wrapper. */
.info-icon-btn .info-icon { transition: scale .12s ease; }
.info-icon-btn:active .info-icon { scale: var(--button-pressed-scale); }

.add-bike-card {
  box-shadow: var(--raised-card-shadow), var(--shadow-panel);
}
.add-bike-card:hover {
  box-shadow: var(--raised-card-shadow), var(--shadow-hover);
}
.add-bike-card:active,
a:active > .add-bike-card {
  box-shadow: var(--raised-pressed-shadow);
}
.add-bike-card:active,
a:active > .add-bike-card { translate: 2px 3px; }

@media (prefers-reduced-motion: reduce) {
  :is(.pt-btn, button, input[type="submit"], input[type="button"], .bike-card-link, .bike-card, .front-page-card, .add-bike-card):active,
  a:active > :is(.bike-card, .front-page-card, .add-bike-card),
  .info-icon-btn:active .info-icon { translate: none; }
}

@media (prefers-reduced-motion: reduce) {
  :is(.pt-btn, button, input[type="submit"], input[type="button"]):not(.pt-btn--ghost, .action-width-probe),
  .info-icon-btn .info-icon { transition: none; }
  :is(.pt-btn, button, input[type="submit"], input[type="button"]):not(.pt-btn--ghost, .action-width-probe):active,
  .info-icon-btn:active .info-icon { scale: none; }
}

/* Shared action experiment: main-branch shadows and a 1px press.
   Ghost/disabled buttons and measurement probes retain their own styles. */
.pt-btn:not(.pt-btn--ghost, .action-width-probe, :disabled, .disabled, [aria-disabled="true"]),
.bike-card-link .bike-card,
.front-page-grid .front-page-card {
  --front-action-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    inset 1px 0 0 rgba(255, 255, 255, 0.75),
    1px 0 0 rgba(0, 0, 0, 0.10),
    0 1px 0 rgba(0, 0, 0, 0.12),
    9px 11px 23px rgba(0, 0, 0, 0.16);
  box-shadow: var(--front-action-shadow);
  transition: background-color .2s ease, box-shadow .2s ease, transform .06s ease;
}
.pt-btn:not(.pt-btn--ghost, .action-width-probe, :disabled, .disabled, [aria-disabled="true"]):hover,
.bike-card-link .bike-card:hover,
.front-page-grid .front-page-card:hover {
  --front-action-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 1px 0 0 rgba(255, 255, 255, 0.8),
    2px 0 0 rgba(0, 0, 0, 0.12),
    0 2px 0 rgba(0, 0, 0, 0.16),
    13px 15px 27px rgba(0, 0, 0, 0.20);
  box-shadow: var(--front-action-shadow);
}
.pt-btn:not(.pt-btn--ghost, .action-width-probe, :disabled, .disabled, [aria-disabled="true"]):active,
.bike-card-link:active > .bike-card,
.front-page-grid .front-page-card:active,
.front-page-grid a:active > .front-page-card {
  translate: none;
  scale: none;
  transform: translateY(1px);
  box-shadow: var(--front-action-shadow);
}
.pt-btn:not(.pt-btn--ghost, .action-width-probe, :disabled, .disabled, [aria-disabled="true"]):focus-visible {
  box-shadow: var(--front-action-shadow), var(--focus-ring);
}
@media (prefers-reduced-motion: reduce) {
  .pt-btn:not(.pt-btn--ghost, .action-width-probe, :disabled, .disabled, [aria-disabled="true"]),
  .bike-card-link .bike-card,
  .front-page-grid .front-page-card { transition: none; }
  .pt-btn:not(.pt-btn--ghost, .action-width-probe, :disabled, .disabled, [aria-disabled="true"]):active,
  .bike-card-link:active > .bike-card,
  .front-page-grid .front-page-card:active,
  .front-page-grid a:active > .front-page-card { transform: none; }
}