/* ============================================================================
* Picky — shared component polish (2026-06-09)
*
* Layered ON TOP of each app's existing CSS to add modern affordances
* without breaking layouts. Loaded as a tag AFTER the app's main
* stylesheet, so the cascade lets these rules win for the things we
* specifically want to polish:
*
* 1. Universal focus rings (a11y-critical, currently missing on 4/5 apps)
* 2. Motion timing on buttons + interactive elements
* 3. Subtle hover lifts on cards
* 4. Table row hover + zebra striping
* 5. Loading-state shimmer
* 6. Empty-state polish
* 7. Toast / status improvements
*
* Everything is scoped to specific selectors. We never set bare `body` or
* `*` rules that would clobber app intent.
* ============================================================================ */
/* ---- 1. Focus rings — universal a11y ------------------------------------- */
/* Use :focus-visible so keyboard users get the ring but mouse clicks don't
leave one stuck. Falls back gracefully where unsupported. */
.pk-focus-rings :focus-visible,
:where(button, a, input, select, textarea, [tabindex]):focus-visible {
outline: 2px solid var(--pk-color-focus-ring);
outline-offset: var(--pk-focus-ring-offset);
border-radius: inherit;
}
/* ---- 2. Motion timing on interactive elements ---------------------------- */
:where(button, a.role-card, .role-card, .menu-item, .brand-card, .slot-tile, .role-card *) {
transition:
background-color var(--pk-motion-base) var(--pk-motion-ease),
border-color var(--pk-motion-base) var(--pk-motion-ease),
color var(--pk-motion-base) var(--pk-motion-ease),
transform var(--pk-motion-fast) var(--pk-motion-ease),
box-shadow var(--pk-motion-base) var(--pk-motion-ease),
opacity var(--pk-motion-base) var(--pk-motion-ease);
}
/* Press feedback — subtle, not theatrical */
:where(button:not(:disabled), .role-card):active {
transform: translateY(1px) scale(0.998);
}
/* ---- 3. Card hover lift -------------------------------------------------- */
.role-card,
.pk-card-lift {
cursor: pointer;
}
.role-card:hover,
.pk-card-lift:hover {
transform: translateY(-2px);
box-shadow: var(--pk-shadow-md);
}
.role-card:focus-visible {
transform: translateY(-2px);
box-shadow: var(--pk-shadow-md);
}
/* ---- 4. Table row hover / zebra (opt-in via class) ---------------------- */
/* Opt-in via .pk-table OR the existing admin convention .slots-table.
Hover affordance helps the eye track rows in long admin lists. We
don't override row backgrounds that already have meaning (.warn,
.full, .locked) — those keep their state colour. */
table.pk-table tbody tr,
table.slots-table tbody tr {
transition: background-color var(--pk-motion-fast) var(--pk-motion-ease);
}
table.pk-table tbody tr:not(.warn):not(.full):not(.locked):hover,
table.slots-table tbody tr:not(.warn):not(.full):not(.locked):hover {
background-color: var(--pk-color-surface-hover);
}
table.pk-zebra tbody tr:nth-child(odd) {
background-color: var(--pk-color-surface-2);
}
table.pk-zebra tbody tr:nth-child(odd):hover {
background-color: var(--pk-color-surface-hover);
}
/* ---- 5. Loading skeleton + shimmer -------------------------------------- */
@keyframes pk-shimmer {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
.pk-skeleton {
background: linear-gradient(90deg,
var(--pk-color-surface-2) 0%,
var(--pk-color-surface-hover) 50%,
var(--pk-color-surface-2) 100%);
background-size: 200% 100%;
animation: pk-shimmer 1.6s infinite linear;
border-radius: var(--pk-radius-sm);
color: transparent; /* hide placeholder text */
user-select: none;
}
.pk-skeleton-text { height: 1em; width: 80%; }
.pk-skeleton-block { height: 80px; width: 100%; }
/* data-loading attribute — set on any container to fade its existing
content and overlay a shimmer. Useful while a fetch is in flight. */
[data-loading="true"] {
position: relative;
pointer-events: none;
}
[data-loading="true"]::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg,
transparent 0%,
var(--pk-color-surface-hover) 50%,
transparent 100%);
background-size: 200% 100%;
animation: pk-shimmer 1.6s infinite linear;
border-radius: inherit;
opacity: 0.6;
pointer-events: none;
}
[data-loading="true"] > * { opacity: 0.45; transition: opacity var(--pk-motion-base); }
/* Fade-in for content that lands after a fetch — adds 180ms of grace */
@keyframes pk-fade-in {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
.pk-fade-in { animation: pk-fade-in var(--pk-motion-base) var(--pk-motion-ease-out) both; }
/* ---- 6. Empty states (opt-in via class) --------------------------------- */
/* Usage:
*
*
*
Nothing here yet
*
Helpful next-step text.
*
*