/* Shared image cards; hearts save collections. */
.skill-card{display:grid;min-width:0}
.skill-card [data-slot=badge] svg{width:12px;height:12px}
.skill-frame{position:relative;overflow:hidden}
/* Lowercase hashtags (A118), the one exception to Title Case chips. */
.skill-hashtags{display:flex;flex-wrap:wrap;gap:2px 8px;margin:0;font-size:12px;line-height:16px}
.skill-hashtags a{font-weight:500;color:var(--primary);text-underline-offset:4px}
.skill-hashtags a:not(:hover){text-decoration:none}
.skill-picture{display:flex;touch-action:manipulation;width:100%;height:100%;align-items:center;justify-content:center;outline:none}
.skill-picture:focus-visible{box-shadow:inset 0 0 0 3px color-mix(in oklab,var(--ring) 50%,transparent)}

.skill-card{--tint:#6b5bd6}[data-nerd-area=health]{--tint:#3f9b6e}[data-nerd-area=money]{--tint:#2f8a74}[data-nerd-area=work]{--tint:#3b6fd8}[data-nerd-area=relationships]{--tint:#c4577a}[data-nerd-area=travel]{--tint:#2a8fb8}[data-nerd-area=home]{--tint:#c98a2e}[data-nerd-area=hobbies]{--tint:#d0683a}[data-nerd-area=content]{--tint:#9a4fc7}[data-nerd-area=learning]{--tint:#8a6d3b}
.skill-frame{background:color-mix(in oklab,var(--tint) 15%,var(--card))}


.skill-card-shell[data-slot=card]{gap:12px;padding:0;border:0;box-shadow:none;background:transparent}
.skill-card-shell [data-slot=card-header],.skill-card-shell [data-slot=card-content],.skill-card-shell [data-slot=card-footer]{padding:0}
.skill-card .skill-frame{aspect-ratio:1.35;border-radius:22px}
.skill-card h4{margin:0;font-size:18px;line-height:1.3;font-weight:600;letter-spacing:-.015em}
.skill-card [data-slot=card-description]{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:14px;line-height:1.45}
/* The quiet Save heart: a frosted chip on the picture, theme aware. The form is the no-JS fallback. */
.skill-save{position:absolute;top:10px;right:10px;margin:0}
.skill-heart{display:grid;text-decoration:none;place-items:center;width:40px;height:40px;padding:0;border:1px solid color-mix(in oklab,var(--border) 70%,transparent);border-radius:50%;background:color-mix(in oklab,var(--background) 78%,transparent);color:var(--foreground);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);cursor:pointer;opacity:.9;transition:color .35s var(--ease-calm,cubic-bezier(.241,.969,.635,.997)),opacity .35s var(--ease-calm,cubic-bezier(.241,.969,.635,.997))}
/* backdrop-filter makes the heart the containing block, so the inset counts from its 38px padding box: -3px gives 44px. */
.skill-heart::after{content:"";position:absolute;inset:-3px}
.skill-heart:hover{opacity:1}.skill-heart:focus-visible{opacity:1;outline:3px solid var(--ring);outline-offset:3px}
/* An outline until saved, then a solid ink bookmark (Instagram), so an unsaved tile never reads as saved. */
.skill-heart .heart-on,.skill-heart[aria-pressed=true] .heart-off{display:none}.skill-heart[aria-pressed=true] .heart-on{display:block}
.skill-heart[aria-pressed=true]{color:var(--foreground);opacity:1}.skill-heart[aria-pressed=true] svg{fill:currentColor}
/* Heart motion (HQ airbnb teardown, Heart): the circle stays put, the glyph grows to 1.08 on hover and dips to .92 on press.
   A save pops once: 449ms, overshoot to 1.04, settle. The pop animates `scale`, so it composes with the hover transform. */
.skill-heart svg{transition:transform .25s var(--ease-standard,cubic-bezier(.2,0,0,1))}
@media(hover:hover){.skill-heart:hover svg{transform:scale(1.08)}}
.skill-heart:active svg{transform:scale(.92)}
.skill-heart[data-pop] svg,.is-saved-pulse .skill-heart[aria-pressed=true] svg{animation:skill-heart-save 449ms var(--ease-standard,cubic-bezier(.2,0,0,1))}
@keyframes skill-heart-save{0%{scale:.92}45%{scale:1.04}100%{scale:1}}
.skill-heart-burst{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;color:#fff;opacity:0;filter:drop-shadow(0 4px 14px rgb(0 0 0/.35))}
.is-saved-pulse .skill-heart-burst{animation:skill-heart-pop .7s cubic-bezier(.2,.9,.3,1.3) both}
@keyframes skill-heart-pop{0%{opacity:0;transform:scale(.4)}20%{opacity:1;transform:scale(1.12)}35%,65%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.05) translateY(-8px)}}
/* One-time hint, shown on the first saveable picture only. */
.skill-tap-hint{position:absolute;left:12px;top:16px;padding:5px 11px;border-radius:9999px;background:color-mix(in oklab,var(--foreground) 82%,transparent);color:var(--background);font-size:12px;font-weight:500;white-space:nowrap;pointer-events:none;animation:skill-hint-in .3s ease both;transition:opacity .5s}
.skill-tap-hint[hidden]{display:none}.skill-tap-hint.is-done{opacity:0}
@keyframes skill-hint-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
/* The AI the creator made it in: a frosted logo chip on the picture, bottom left. Taps pass through. */
.skill-ai{position:absolute;left:10px;bottom:10px;display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px 0 8px;border:1px solid color-mix(in oklab,var(--border) 70%,transparent);border-radius:999px;background:color-mix(in oklab,#fff 88%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:oklch(0.25 0.03 316);font-size:12px;font-weight:550;line-height:1;white-space:nowrap;pointer-events:none}
.skill-ai img{display:block;object-fit:contain}
.skill-more-title{margin:0;font-size:15px;line-height:1.3;font-weight:600}
.skill-who{display:flex;align-items:center;gap:12px}
.skill-who-link{display:flex;flex:0 1 auto;min-width:0;align-items:center;gap:10px;color:inherit;text-decoration:none}
.skill-who-link [data-slot=avatar]{width:40px;height:40px}
.skill-who-stack{display:flex;min-width:0;flex-direction:column;line-height:1.25}
.skill-who-name{display:flex;min-width:0;align-items:center;gap:4px;font-size:14px;font-weight:600}
.skill-who-handle{font-size:13px;color:var(--muted-foreground)}
a.skill-who-link:hover .skill-who-name>.truncate{text-decoration:underline;text-underline-offset:3px}
.skill-follow{flex:none;display:inline-flex;align-items:center;min-height:30px;padding:0 14px;border:1px solid var(--border);border-radius:9999px;font-size:13px;font-weight:600;color:var(--foreground);text-decoration:none;transition:background-color .2s}
.skill-follow:hover{background:var(--accent)}.skill-follow[aria-pressed=true]{background:var(--secondary);color:var(--secondary-foreground)}
.skill-follow:focus-visible{outline:3px solid color-mix(in oklab,var(--ring) 60%,transparent);outline-offset:2px}
.skill-more-count{margin:4px 0 8px;font-size:12px;font-weight:600;color:var(--muted-foreground)}
.skill-more-skills{display:flex;flex-direction:column;margin:0;padding:0;list-style:none;border-top:1px solid var(--border)}
.skill-more-skills a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:10px 0;border-bottom:1px solid var(--border);font-size:14px;font-weight:500;color:var(--foreground);text-decoration:none}
.skill-more-skills a svg{flex:none;color:var(--muted-foreground);transition:transform .2s}.skill-more-skills a:hover svg{transform:translateX(2px)}
/* Card expansion (static/skill-cards.js adds .is-open). Open-only parts stay out of the layout until then. */
.skill-body{display:flex;flex:1;flex-direction:column;gap:12px;min-width:0}
.skill-open-only{display:none!important}
.skill-card.is-open .skill-open-only{display:flex!important}
.skill-card.is-open [data-pitch]{display:block;-webkit-line-clamp:unset;overflow:visible}
.skill-card.is-open .skill-open-only{animation:skill-open-in .24s cubic-bezier(.2,0,0,1) both}
@keyframes skill-open-in{from{opacity:0;transform:translateY(6px)}}
.skill-more{flex-direction:column}
.skill-more-skills a>span{display:flex;flex-direction:column;gap:2px;min-width:0}.skill-more-does{font-size:12px;font-weight:400;line-height:1.4;color:var(--muted-foreground)}
.skill-setup-toggle{display:inline-flex;align-items:center;gap:8px;min-height:44px;border-radius:9999px;font-size:12px;color:var(--muted-foreground);text-decoration:none}
.skill-setup-toggle svg{transition:transform .2s}.skill-setup-toggle[aria-expanded=true] svg{transform:rotate(180deg)}
.skill-setup-toggle:focus-visible{outline:3px solid color-mix(in oklab,var(--ring) 60%,transparent);outline-offset:2px}
.skill-more-actions{flex-wrap:wrap;align-items:center;gap:8px}
.skill-less{display:inline-flex;align-items:center;min-height:32px;padding:0 12px;border-radius:9999px;font-size:13px;font-weight:500;color:var(--foreground);text-decoration:none}.skill-less:hover{background:var(--accent)}.skill-less:focus-visible{outline:3px solid color-mix(in oklab,var(--ring) 60%,transparent);outline-offset:2px}
::view-transition-old(root),::view-transition-new(root){animation-duration:.22s}
/* What a skill makes: at most two quiet chips on the picture. Taps pass through to the picture. */
.skill-kinds{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.skill-kind{display:inline-flex;align-items:center;gap:5px;min-height:24px;padding:2px 9px;border:1px solid var(--border);border-radius:9999px;background:var(--background);color:var(--foreground);font-size:12px;font-weight:500;line-height:1.2}
.skill-kind svg{flex-shrink:0;color:var(--muted-foreground)}
.skill-card [data-slot=card-footer]{align-items:flex-start;flex-wrap:wrap}
.skill-source-icon{display:grid;place-items:center;flex-shrink:0;width:30px;height:30px;border:1px solid var(--border);border-radius:50%;background:#fff;color:#55495c}.skill-source-icon img{object-fit:contain}
/* Brand marks need a light chip, so dark mode softens it instead of inverting it (same as the system icon chips). */
:root.dark .skill-source-icon{background:#e9e6ec;border-color:transparent;color:#3a3040}
@media(prefers-color-scheme:dark){:root.system .skill-source-icon{background:#e9e6ec;border-color:transparent;color:#3a3040}}
/* Reduced motion: no pop or beat, the burst just shows briefly and fades. */
@media(prefers-reduced-motion:reduce){.skill-card.is-open .skill-open-only{animation:none}.skill-heart,.skill-heart svg,.skill-tap-hint{transition:none}.skill-tap-hint,.skill-heart[data-pop] svg,.is-saved-pulse .skill-heart[aria-pressed=true] svg{animation:none}.is-saved-pulse .skill-heart-burst{animation:skill-heart-fade .9s linear both}.skill-heart svg{transform:none!important}}
@keyframes skill-heart-fade{0%,60%{opacity:1}100%{opacity:0}}