/* Design system v2 — cards (round 26, UIX-6).
   Colour, shape and motion only (UiV2NoSizeTest): hover = hairline (cards: + one background step),
   focus-visible ring, selected = primary hairline, radius lg (V1).
   The node-panel tile is .np-cardgrid-item (np-cardgrid.css sets its states with !important). */

.siteclick-container .siteclick-tile,
.siteclick-container .siteclick-card {
    border-radius: var(--sc-radius-lg);
    transition: border-color var(--sc-dur-fast) var(--sc-ease-out),
                background-color var(--sc-dur-fast) var(--sc-ease-out),
                box-shadow var(--sc-dur-fast) var(--sc-ease-out);
}
/* Round 28 (UIX-5, r.315-319): a clickable tile only lights up its hairline, no fill. */
.siteclick-container a.siteclick-tile:hover,
.siteclick-container .siteclick-tile[data-sidebar-toggle]:hover,
.siteclick-container .siteclick-tile[data-sc-tile-expand]:not(.is-expanded):hover,
.siteclick-container .siteclick-tile:has(> .dash-tile-cover):hover {
    border-color: var(--sc-color-border-strong);
}
.siteclick-container a.siteclick-card:hover {
    border-color: var(--sc-color-border-strong);
    background-color: var(--sc-color-surface-alt);
}
.siteclick-container .siteclick-tile:focus-visible,
.siteclick-container .siteclick-card:focus-visible,
.np-cardgrid-item:focus-visible {
    outline: none;
    box-shadow: var(--sc-ring);
}
.siteclick-container .siteclick-tile:is(.active, .is-active, [aria-selected="true"]),
.siteclick-container .siteclick-card:is(.active, .is-active, [aria-selected="true"]) {
    border-color: var(--sc-color-primary);
}

.np-cardgrid-item {
    border-radius: var(--sc-radius-lg) !important;
    transition: border-color var(--sc-dur-fast) var(--sc-ease-out),
                background-color var(--sc-dur-fast) var(--sc-ease-out),
                box-shadow var(--sc-dur-fast) var(--sc-ease-out);
}
/* Run 31a (EDT-1, r.289): hover is a ground step with a visible border; blue = chosen. */
.np-cardgrid-item:not(.active):not(.is-active):not(.is-disabled):hover {
    border-color: var(--sc-color-border-strong) !important;
    background: var(--sc-color-surface-alt) !important;
}

/* Round 28 (UIX-1, r.14): the one glass surface (tokens --sc-glass-bg / --sc-glass-blur). */
.sc-glass { background: var(--sc-glass-bg); -webkit-backdrop-filter: var(--sc-glass-blur); backdrop-filter: var(--sc-glass-blur); }

/* Run 32 (CRE-1, r.5/r.14): the one shine — a hairline with a turning glint (--border) or a light sweep over a masked shape (--mask). */
@property --sc-shine-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.sc-shine { position: relative; }
.sc-shine.sc-shine--border { box-shadow: inset 0 0 0 1px var(--sc-color-hairline); }
.sc-shine.sc-shine--border::after {
    content: '';
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: inherit;
    background: conic-gradient(from var(--sc-shine-a), transparent 0deg, var(--sc-shine-ink) 24deg, transparent 48deg);
    -webkit-mask: linear-gradient(var(--sc-color-white) 0 0) content-box, linear-gradient(var(--sc-color-white) 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(var(--sc-color-white) 0 0) content-box exclude, linear-gradient(var(--sc-color-white) 0 0);
    pointer-events: none;
    animation: sc-shine-turn var(--sc-shine-period) var(--sc-ease-in-out) infinite;
}
.sc-shine.sc-shine--mask {
    background-image: linear-gradient(105deg, transparent 40%, var(--sc-shine-ink-mask) 50%, transparent 60%);
    background-size: 300% 100%;
    background-repeat: no-repeat;
    background-position: 150% 0;
    animation: sc-shine-sweep var(--sc-shine-period) var(--sc-ease-out) infinite;
}
/* Run 36a1 (KLN-1, r.9): one slow linear turn over 70 % of the period (fade in to 10 %, full to 45 %, fade out to 70 %),
   then a pause; the sweep runs over the same 70 %. */
@keyframes sc-shine-turn {
    0% { --sc-shine-a: 0deg; opacity: 0; animation-timing-function: linear; }
    10%, 45% { opacity: 1; animation-timing-function: linear; }
    70%, 100% { --sc-shine-a: 360deg; opacity: 0; }
}
@keyframes sc-shine-sweep { 0% { background-position: 150% 0; } 70%, 100% { background-position: -50% 0; } }
@media (prefers-reduced-motion: reduce) {
    .sc-shine.sc-shine--border::after { content: none; }
    .sc-shine.sc-shine--mask { animation: none; background-image: none; }
}