/* PACK RAT — Board chrome (BOARD part). Cardboard shipping tags for cards, label-maker tape for headings, chunky cardboard buttons.
 * Every rule is scoped under .prb. Layout switches on .prb-landscape / .prb-portrait (set by js/board/board.js from the container size). */
.prb {
  --tray-w: 284px; --tray-h: 118px; --meter-h: 56px;
  position: absolute; inset: 0; overflow: hidden; font-family: var(--pr-font-ui); color: var(--pr-ink);
  user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none;
}
.prb *, .prb *::before, .prb *::after { box-sizing: border-box; }
.prb [hidden] { display: none !important; }
.prb-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; outline: none; }
.prb-hover-item .prb-canvas { cursor: grab; }
.prb-hover-lock .prb-canvas { cursor: not-allowed; }
.prb-holding .prb-canvas, .prb-holding { cursor: grabbing; }
.prb::after { /* soft vignette */
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: radial-gradient(ellipse at 50% 46%, transparent 55%, rgba(8, 24, 21, .38) 100%);
}
.prb-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.prb svg.prb-ico { width: 1.2em; height: 1.2em; flex: none; }
.prb kbd { font: 600 10px var(--pr-font-ui); background: var(--pr-ink); color: #fff; padding: 1px 5px; border-radius: 4px; }

/* ---------- tray ---------- */
.prb-tray {
  position: absolute; z-index: 5; display: flex; flex-direction: column; min-height: 0;
  background: repeating-linear-gradient(0deg, #c1904f 0 5px, #b98449 5px 10px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 0 24px rgba(0, 0, 0, .4);
  transition: transform .5s var(--pr-ease), background-color .15s, opacity .3s;
}
.prb-landscape .prb-tray { top: 0; bottom: 0; right: 0; width: var(--tray-w); border-left: 5px solid var(--pr-cardboard-dark); }
.prb-landscape.prb-left .prb-tray { right: auto; left: 0; border-left: 0; border-right: 5px solid var(--pr-cardboard-dark); }
.prb-portrait .prb-tray { left: 0; right: 0; bottom: 0; height: var(--tray-h); border-top: 5px solid var(--pr-cardboard-dark); flex-direction: row; }
.prb-tray-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 10px 10px 4px; padding: 6px 12px; border-radius: 4px;
  background: #1c1c1c; color: #fff; font: 700 12px var(--pr-font-ui); letter-spacing: .16em; text-shadow: 0 1px 0 #000, 0 -1px 0 rgba(255, 255, 255, .25);
  box-shadow: 0 2px 0 rgba(0, 0, 0, .3); flex: none;
}
.prb-tray-count { font-weight: 600; letter-spacing: .04em; color: var(--pr-brand-accent); }
.prb-portrait .prb-tray-head { flex-direction: column; justify-content: center; margin: 8px 0 8px 8px; padding: 6px 8px; width: 54px; text-align: center; gap: 2px; font-size: 10px; letter-spacing: .1em; }
.prb-tray-list {
  flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 6px 10px 14px; display: flex; flex-direction: column; gap: 9px;
  touch-action: pan-y; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--pr-cardboard-dark) transparent;
}
.prb-portrait .prb-tray-list { flex-direction: row; overflow-x: auto; overflow-y: hidden; padding: 12px 10px 8px; touch-action: pan-x; align-items: stretch; }
.prb-tray-empty { display: none; margin: auto; padding: 20px; text-align: center; color: #fff6e3; font: 600 15px var(--pr-font-ui); text-shadow: 0 2px 0 rgba(0, 0, 0, .3); }
.prb-tray-empty strong { display: block; font: 400 22px var(--pr-font-display); }
.prb-tray-done .prb-tray-empty { display: block; }
.prb-drop-target { outline: 3px dashed rgba(255, 182, 39, .85); outline-offset: -8px; }
.prb-over { background-color: #d9a45c; outline-color: #fff; }

/* cards */
.prb-card {
  position: relative; flex: none; border-radius: 12px; background: var(--pr-card); border: 2px solid #7b5426; box-shadow: var(--pr-shadow-sm);
  transition: transform .16s var(--pr-ease), opacity .2s, box-shadow .16s;
}
.prb-card::before { /* the punched tag hole */
  content: ''; position: absolute; left: 7px; top: 7px; width: 9px; height: 9px; border-radius: 50%; background: #b98449; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .55); z-index: 2; pointer-events: none;
}
.prb-card:hover { transform: translateY(-2px) rotate(-.5deg); box-shadow: 0 6px 0 rgba(0, 0, 0, .16), 0 14px 22px rgba(0, 0, 0, .3); }
.prb-card-main {
  display: grid; grid-template-columns: 62px 1fr; gap: 10px; align-items: center; width: 100%; padding: 9px 12px 9px 8px; border: 0; margin: 0; background: transparent;
  color: inherit; font: inherit; text-align: left; cursor: grab; border-radius: 10px; touch-action: pan-y; position: relative;
}
.prb-portrait .prb-card-main { touch-action: pan-x; }
.prb-card-main:focus-visible, .prb-tool:focus-visible, .prb-aisle:focus-visible, .prb-hb:focus-visible, .prb-card-ta:focus-visible { outline: 3px solid var(--pr-info); outline-offset: 2px; }
.prb-card-main:disabled { cursor: default; }
.prb-card-icon { display: block; width: 62px; height: 62px; border-radius: 10px; background: radial-gradient(circle at 50% 60%, #f4e6c6, #e9d4a4); overflow: hidden; opacity: 0; transform: scale(.85); transition: opacity .25s, transform .3s var(--pr-ease); }
.prb-has-icon .prb-card-icon { opacity: 1; transform: none; }
.prb-card-icon canvas { width: 100%; height: 100%; display: block; }
.prb-card-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.prb-card-name { font: 600 15px/1.1 var(--pr-font-ui); color: var(--pr-ink); overflow-wrap: anywhere; }
.prb-card-dims { font: 500 12px var(--pr-font-ui); color: var(--pr-ink-soft); }
.prb-card-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; margin-top: 2px; }
.prb-weight { font: 600 12px var(--pr-font-ui); color: var(--pr-ink-soft); }
.prb-badge { display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px 1px 4px; border-radius: 999px; font: 600 10.5px var(--pr-font-ui); border: 1px solid rgba(0, 0, 0, .18); }
.prb-badge svg { width: 12px; height: 12px; }
.prb-badge em { font-style: normal; }
.prb-b-fragile { background: #dff1ff; color: #0a4c86; }
.prb-b-heavy { background: #e9e2d6; color: #4a3a20; }
.prb-b-lean { background: #ffe9b8; color: #7a4a00; }
.prb-b-takeApart { background: #d8f3e6; color: #0d5a3c; }
.prb-card-count {
  display: none; position: absolute; top: -9px; right: -7px; min-width: 28px; height: 28px; padding: 0 6px; align-items: center; justify-content: center;
  border-radius: 14px; background: var(--pr-warn); color: var(--pr-ink); font: 400 16px var(--pr-font-display); border: 2px solid #7b5426; transform: rotate(7deg); box-shadow: 0 2px 0 rgba(0, 0, 0, .25); z-index: 3;
}
.prb-card-count.on { display: inline-flex; }
.prb-card-ta {
  position: absolute; right: 8px; bottom: 8px; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; border: 2px solid #0d5a3c; background: #d8f3e6; color: #0d5a3c;
  cursor: pointer; padding: 0; z-index: 2; transition: transform .12s var(--pr-ease), background .12s;
}
.prb-card-ta svg { width: 17px; height: 17px; }
.prb-card-ta:hover { transform: scale(1.12) rotate(-12deg); background: #b8ecd2; }
.prb-card-ta:disabled { opacity: .35; }
.prb-card:has(.prb-card-ta) .prb-card-main { padding-right: 46px; }
.prb-holding.prb-card, .prb-card.prb-holding { opacity: .55; border-style: dashed; }
.prb-card.prb-empty { opacity: .4; border-style: dashed; }
.prb-card.prb-arriving { opacity: 0; transform: scale(.8); }
.prb-card.prb-pop { animation: prb-pop .5s var(--pr-ease); }
@keyframes prb-pop { 0% { transform: scale(.82) rotate(-4deg); } 55% { transform: scale(1.09) rotate(2deg); } 100% { transform: none; } }

/* portrait bar + compact cards */
.prb-portrait .prb-card { width: 132px; }
.prb-portrait .prb-card-main { grid-template-columns: 1fr; justify-items: center; gap: 4px; padding: 8px 8px 6px; text-align: center; height: 100%; align-content: start; }
.prb-portrait .prb-card-icon { width: 54px; height: 54px; }
.prb-portrait .prb-card-body { align-items: center; }
.prb-portrait .prb-card-name { font-size: 12.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.prb-portrait .prb-card-dims, .prb-portrait .prb-weight, .prb-portrait .prb-badge em { display: none; }
.prb-portrait .prb-card-meta { justify-content: center; gap: 3px; margin: 0; }
.prb-portrait .prb-badge { padding: 2px; }
.prb-portrait .prb-card-ta { right: 4px; bottom: 4px; width: 26px; height: 26px; }
.prb-portrait .prb-card:has(.prb-card-ta) .prb-card-main { padding-right: 8px; }
.prb-portrait .prb-card::before { display: none; }
.prb-landscape.prb-w-s { --tray-w: 176px; }
.prb-landscape.prb-w-s .prb-card-main { grid-template-columns: 44px 1fr; gap: 6px; padding: 6px 6px 6px 6px; }
.prb-landscape.prb-w-s .prb-card-icon { width: 44px; height: 44px; }
.prb-landscape.prb-w-s .prb-card-name { font-size: 12.5px; }
.prb-landscape.prb-w-s .prb-card-dims, .prb-landscape.prb-w-s .prb-badge em { display: none; }
.prb-landscape.prb-w-s .prb-card::before { display: none; }
.prb-landscape.prb-w-s .prb-card:has(.prb-card-ta) .prb-card-main { padding-right: 38px; }
.prb-landscape.prb-w-s .prb-card-ta { width: 26px; height: 26px; right: 5px; bottom: 5px; }
@media (min-width: 1500px) { .prb-landscape { --tray-w: 324px; } }
.prb-locked .prb-card-main { cursor: not-allowed; }

/* ---------- meter (label-maker tape) ---------- */
.prb-meter {
  position: absolute; z-index: 4; top: 10px; left: 10px; display: flex; align-items: center; gap: 12px; padding: 6px 12px 6px 7px; min-height: var(--meter-h);
  background: rgba(15, 42, 38, .88); color: #fff; border-radius: 16px; box-shadow: var(--pr-shadow-sm), inset 0 0 0 2px rgba(255, 255, 255, .08); backdrop-filter: blur(3px);
  transition: transform .5s var(--pr-ease), opacity .3s;
}
.prb-landscape.prb-left .prb-meter { left: calc(var(--tray-w) + 10px); }
.prb-portrait .prb-meter { left: 8px; right: 8px; top: 8px; gap: 8px; padding: 5px 8px 5px 5px; justify-content: space-between; }
.prb-ring { position: relative; width: 44px; height: 44px; flex: none; }
.prb-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.prb-ring circle { fill: none; stroke-width: 5; }
.prb-ring-track { stroke: rgba(255, 255, 255, .18); }
.prb-ring-fill { stroke: var(--pr-brand-accent); stroke-linecap: round; transition: stroke-dashoffset .55s cubic-bezier(.2, .9, .25, 1.05); }
.prb-ring-pct { position: absolute; inset: 0; display: grid; place-items: center; font: 700 11px var(--pr-font-ui); }
.prb-meter-text { display: flex; flex-direction: column; gap: 0; line-height: 1.15; min-width: 0; }
.prb-packed { display: flex; align-items: baseline; gap: 5px; white-space: nowrap; }
.prb-meter-label { font: 700 10px var(--pr-font-ui); letter-spacing: .14em; color: var(--pr-brand-accent); }
.prb-packed-n { font: 400 22px/1 var(--pr-font-display); }
.prb-packed-of { font: 400 15px var(--pr-font-display); opacity: .7; margin-left: -3px; }
.prb-cu { font: 500 12px var(--pr-font-ui); opacity: .85; white-space: nowrap; }
.prb-cu b { font-weight: 700; }
.prb-aisle {
  display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px 5px 7px; border-radius: 999px; border: 2px solid; font: 600 12px var(--pr-font-ui); cursor: pointer; white-space: nowrap; background: transparent; touch-action: manipulation;
}
.prb-aisle svg { width: 16px; height: 16px; }
.prb-aisle-ok { background: rgba(63, 192, 110, .2); color: #8cf0b0; border-color: #3fc06e; }
.prb-aisle-bad { background: rgba(255, 90, 74, .18); color: #ffa79c; border-color: #ff5a4a; }
.prb-portrait .prb-aisle-text { font-size: 11px; }
.prb-w-s .prb-cu { display: none; }
.prb-bump { animation: prb-bump .45s var(--pr-ease); }
@keyframes prb-bump { 0% { transform: scale(1); } 35% { transform: scale(1.06); } 100% { transform: scale(1); } }
.prb-meter-full { box-shadow: var(--pr-shadow-sm), 0 0 0 3px var(--pr-brand-accent), 0 0 24px rgba(255, 182, 39, .55); }

/* ---------- tools ---------- */
.prb-tools {
  position: absolute; z-index: 4; bottom: 12px; display: flex; align-items: center; gap: 6px; padding: 7px; border-radius: 20px;
  background: rgba(15, 42, 38, .84); box-shadow: var(--pr-shadow-sm), inset 0 0 0 2px rgba(255, 255, 255, .08); backdrop-filter: blur(3px); transition: transform .5s var(--pr-ease), opacity .3s;
}
.prb-landscape .prb-tools { left: calc((100% - var(--tray-w)) / 2); transform: translateX(-50%); }
.prb-landscape.prb-left .prb-tools { left: calc(var(--tray-w) + (100% - var(--tray-w)) / 2); }
.prb-portrait .prb-tools { left: 50%; transform: translateX(-50%); bottom: calc(var(--tray-h) + 8px); }
.prb-tool {
  position: relative; width: 56px; height: 56px; padding: 0; border: 0; border-radius: 13px; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  background: linear-gradient(#f7e2b8, #e9c98c); color: var(--pr-ink); font: 600 10px var(--pr-font-ui); box-shadow: 0 4px 0 #a87c3d, 0 8px 12px rgba(0, 0, 0, .28); touch-action: manipulation;
  transition: transform .09s, box-shadow .09s, opacity .15s, background .15s;
}
.prb-tool:hover { transform: translateY(-2px); box-shadow: 0 6px 0 #a87c3d, 0 12px 16px rgba(0, 0, 0, .3); }
.prb-tool:active, .prb-tool.prb-press { transform: translateY(3px); box-shadow: 0 1px 0 #a87c3d, 0 3px 6px rgba(0, 0, 0, .3); }
.prb-tool-ico { display: grid; place-items: center; }
.prb-tool-ico svg { width: 24px; height: 24px; }
.prb-tool-ico.flip svg { transform: scaleX(-1); }
.prb-tool-label { line-height: 1; letter-spacing: .02em; }
.prb-tool kbd { position: absolute; top: -6px; right: -4px; pointer-events: none; }
.prb-tool-badge { position: absolute; bottom: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; display: grid; place-items: center; border-radius: 10px; font: 700 12px var(--pr-font-ui); font-style: normal; background: var(--pr-brand); color: #fff; border: 2px solid #fff6e3; }
.prb-tool-badge.zero { background: #8a8a80; }
.prb-tool.prb-dim { opacity: .45; filter: grayscale(.6); box-shadow: 0 2px 0 #a87c3d; }
.prb-tool.prb-active { background: linear-gradient(#a6e6d6, #62c7ad); }
.prb-tool.prb-emph { animation: prb-emph 1s ease-in-out infinite; }
@keyframes prb-emph { 50% { box-shadow: 0 4px 0 #a87c3d, 0 0 0 5px rgba(255, 182, 39, .8), 0 8px 12px rgba(0, 0, 0, .28); } }
.prb-tool-sep { width: 2px; height: 34px; background: rgba(255, 255, 255, .2); border-radius: 1px; margin: 0 2px; }
.prb-portrait .prb-tool, .prb-w-s .prb-tool { width: 46px; height: 46px; }
.prb-portrait .prb-tool-label, .prb-w-s .prb-tool-label { display: none; }
.prb-portrait .prb-tool-ico svg, .prb-w-s .prb-tool-ico svg { width: 23px; height: 23px; }
.prb-portrait .prb-tools { gap: 4px; padding: 5px 6px; }
.prb-portrait .prb-tool-sep, .prb-portrait .prb-tool-orbitL, .prb-portrait .prb-tool-orbitR { display: none; }
.prb-touch .prb-tool { width: 56px; height: 56px; }
.prb-touch .prb-tool kbd { display: none; }
.prb-portrait.prb-touch .prb-tool { width: 46px; height: 52px; border-radius: 12px; }
.prb-portrait .prb-tools { max-width: calc(100% - 12px); }
.prb-portrait.prb-touch .prb-tools { gap: 3px; padding: 5px; }

/* touch place / put back */
.prb-holdbar { position: absolute; z-index: 6; left: 50%; bottom: 92px; transform: translateX(-50%); display: none; gap: 12px; }
.prb-holdbar.on { display: flex; }
.prb-portrait .prb-holdbar { bottom: calc(var(--tray-h) + 74px); }
.prb-landscape .prb-holdbar { left: calc((100% - var(--tray-w)) / 2); }
.prb-hb { display: inline-flex; align-items: center; gap: 8px; height: 52px; padding: 0 20px 0 14px; border-radius: 26px; border: 3px solid #fff6e3; font: 400 18px var(--pr-font-display); color: #fff; box-shadow: var(--pr-shadow); cursor: pointer; touch-action: manipulation; }
.prb-hb svg { width: 24px; height: 24px; }
.prb-hb-place { background: #2e9e5b; }
.prb-hb-cancel { background: #c9503f; }
.prb-hb:active { transform: translateY(3px); }

/* ---------- floating bits ---------- */
.prb-bubble {
  position: absolute; left: 0; top: 0; z-index: 7; pointer-events: none; display: flex; align-items: center; gap: 6px; max-width: min(300px, 80%); padding: 6px 13px 6px 8px; border-radius: 10px;
  font: 600 13px/1.25 var(--pr-font-ui); border: 2px solid; box-shadow: var(--pr-shadow-sm); will-change: transform;
}
.prb-bubble svg { width: 18px; height: 18px; }
.prb-bubble-bad { background: #fff0ec; color: #8a1d10; border-color: var(--pr-bad); }
.prb-bubble-good { background: #ecfbf1; color: #14683a; border-color: var(--pr-good); }
.prb-bubble-info { background: #f4fbf9; color: var(--pr-ink); border-color: var(--pr-brand); }
.prb-bubble-hint { background: #fff6dc; color: #6b4300; border-color: var(--pr-warn); }
.prb-toast {
  position: absolute; z-index: 8; left: 50%; top: 70px; transform: translate(-50%, -10px); max-width: min(520px, 90%); padding: 9px 18px; border-radius: 8px; background: #1c1c1c; color: #fff; font: 600 14px/1.3 var(--pr-font-ui);
  text-align: center; box-shadow: var(--pr-shadow); opacity: 0; pointer-events: none; transition: opacity .2s, transform .3s var(--pr-ease); border-bottom: 4px solid var(--pr-info);
}
.prb-landscape .prb-toast { left: calc((100% - var(--tray-w)) / 2); }
.prb-landscape.prb-left .prb-toast { left: calc(var(--tray-w) + (100% - var(--tray-w)) / 2); }
.prb-toast.on { opacity: 1; transform: translate(-50%, 0); }
.prb-toast-bad { border-bottom-color: var(--pr-bad); }
.prb-toast-hint { border-bottom-color: var(--pr-warn); }
.prb-portrait .prb-toast { top: 72px; }
.prb-tip {
  position: absolute; left: 0; top: 0; z-index: 9; pointer-events: none; max-width: 240px; padding: 7px 11px; border-radius: 8px; background: var(--pr-paper); color: var(--pr-ink); border: 2px solid var(--pr-cardboard-dark);
  font: 500 12.5px/1.35 var(--pr-font-ui); box-shadow: var(--pr-shadow-sm); opacity: 0; transition: opacity .12s;
}
.prb-tip.on { opacity: 1; }
.prb-tip b { font-weight: 700; }
.prb-tip kbd { margin-left: 2px; }
.prb-proxy { position: absolute; left: 0; top: 0; z-index: 10; width: 68px; height: 68px; pointer-events: none; opacity: 0; transition: opacity .1s; will-change: transform; }
.prb-proxy.on { opacity: 1; }
.prb-proxy canvas { width: 100%; height: 100%; filter: drop-shadow(0 8px 6px rgba(0, 0, 0, .4)); transform: rotate(-5deg) scale(1.1); }

/* ---------- coach marks ---------- */
.prb-coach { animation: prb-coach 1.1s ease-in-out infinite; }
.prb-tool.prb-coach { animation: prb-coach-tool 1.1s ease-in-out infinite; }
@keyframes prb-coach { 50% { box-shadow: 0 0 0 4px var(--pr-warn), 0 0 0 11px rgba(255, 182, 39, .35), var(--pr-shadow-sm); } }
@keyframes prb-coach-tool { 50% { box-shadow: 0 4px 0 #a87c3d, 0 0 0 4px var(--pr-warn), 0 0 0 11px rgba(255, 182, 39, .4); } }

/* ---------- payoff ---------- */
.prb-celebrate .prb-tray { transform: translateX(105%); }
.prb-celebrate.prb-left .prb-tray { transform: translateX(-105%); }
.prb-celebrate.prb-portrait .prb-tray { transform: translateY(105%); }
.prb-celebrate .prb-tools { opacity: 0; transform: translate(-50%, 30px); pointer-events: none; }
.prb-celebrate .prb-meter { transform: translateY(-16px); }

@media (prefers-reduced-motion: reduce) {
  .prb *, .prb *::before, .prb *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
}

/* ---------- phone in landscape: short screens get a slim tray, icon-only tools, no orbit buttons ---------- */
.prb-landscape.prb-h-s { --tray-w: 196px; --meter-h: 46px; }
.prb-landscape.prb-h-s .prb-tool-label, .prb-landscape.prb-h-s .prb-tool-sep, .prb-landscape.prb-h-s .prb-tool-orbitL, .prb-landscape.prb-h-s .prb-tool-orbitR { display: none; }
.prb-landscape.prb-h-s .prb-tool, .prb-landscape.prb-h-s.prb-touch .prb-tool { width: 46px; height: 46px; }
.prb-landscape.prb-h-s .prb-tools { bottom: 6px; gap: 4px; padding: 5px; max-width: calc(100% - var(--tray-w) - 12px); }
.prb-landscape.prb-h-s .prb-meter { top: 6px; padding: 4px 10px 4px 5px; }
.prb-landscape.prb-h-s .prb-ring { width: 36px; height: 36px; }
.prb-landscape.prb-h-s .prb-card-dims, .prb-landscape.prb-h-s .prb-card-meta { display: none; }
.prb-landscape.prb-h-s .prb-holdbar { bottom: 66px; }
.prb-holdbar.prb-bad .prb-hb-place { background: #8a8a80; opacity: .75; }

/* take-apart wrench: the visible disc stays 26-32 px, the tap area grows to ~44 px */
.prb-card-ta::before { content: ''; position: absolute; inset: -8px; border-radius: 50%; }