/* CLAUDE 10-20 (owner: "you can't press and highlight them"): the plan picker's states (planpick.js), shared by the app
   landing, the Pricing page and ripclip.org (tools/build_site.py copies this file). The app's Graphite tokens first, the
   site's names as the fallback, so one file serves both. Each surface keeps its own card layout; this file only adds
   the press (the motion system's --press), the selected ring and check, the slight dim of the others, the focus ring and
   the one button under the cards (a sticky bar on a phone). Reduced motion: --press is 1 and the colours still change. */
.pp-card {
  --pp-fg: var(--c-fg, var(--ink));
  --pp-ink: var(--c-primary-ink, var(--go-ink));
  position: relative;
  cursor: pointer;
  outline: 1.5px solid transparent;
  outline-offset: 3px;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
  transition:
    opacity var(--d-ui) var(--ease-out),
    outline-color var(--d-ui) var(--ease-out),
    outline-offset var(--d-ui) var(--ease-out),
    scale var(--d-ui) var(--ease-spring);
}
.pp-card:active {
  scale: var(--press);
}
.pp-card[aria-checked='true'] {
  outline-color: var(--pp-fg);
  outline-offset: 2px;
}
/* the others step back a little; under a pointer they come forward again (a preview of the tap) */
.pp-group .pp-card[aria-checked='false'] {
  opacity: 0.78;
}
@media (hover: hover) and (pointer: fine) {
  .pp-group .pp-card[aria-checked='false']:hover {
    opacity: 1;
  }
}
.pp-card:focus-visible {
  outline: 2px solid var(--c-focus, var(--focus));
  outline-offset: 4px;
}
/* the check: a filled circle in the top-right corner with a tick, scaling in on the spring */
.pp-check {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--pp-fg);
  opacity: 0;
  scale: 0.6;
  pointer-events: none;
  transition:
    opacity var(--d-ui) ease,
    scale var(--d-ui) var(--ease-spring);
}
.pp-check::after {
  content: '';
  position: absolute;
  left: 8px;
  top: 4px;
  width: 5px;
  height: 10px;
  border: solid var(--pp-ink);
  border-width: 0 2px 2px 0;
  rotate: 45deg;
}
.pp-card[aria-checked='true'] .pp-check {
  opacity: 1;
  scale: 1;
}
/* the one button under the cards (each surface places it); its words change with the pick, with no motion: they are
   a keyboard result */
.pp-bar .pp-cta {
  min-width: min(360px, 100%);
  min-height: 48px;
}
.pp-fine {
  margin: 0;
  color: var(--c-fg-3, var(--dim));
  text-align: center;
}
.pp-fine:empty {
  display: none;
}
/* a phone: the bar sticks to the bottom while the cards scroll past, and settles under them at the end (sticky inside
   the plans section, no script). In the app shell it already stops above the tab bar: #home's bottom padding
   (phone.css --tabs-h) keeps sticky things out of it. */
@media (max-width: 767.98px) {
  .pp-bar {
    position: sticky;
    bottom: 0;
    z-index: 3;
    margin: 16px -16px 0;
    padding: 12px 16px max(12px, env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--c-canvas, var(--bg)) 86%, transparent);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    box-shadow: 0 -1px 0 var(--c-line, var(--hair));
  }
  .pp-bar .pp-cta {
    width: 100%;
  }
}