/* Shades pages: /shades and /shades/<family> */

/* ---- Family finder and tiles (/shades) ---- */
.shades-find-row { font-size: 0; white-space: nowrap; }
.shades-find-picker { display: inline-block; vertical-align: top; width: 2.5rem; height: 2.5rem; padding: 0.1875rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); cursor: pointer; }
.shades-find-picker::-webkit-color-swatch-wrapper { padding: 0; } .shades-find-picker::-webkit-color-swatch { border: 0; border-radius: 4px; } .shades-find-picker::-moz-color-swatch { border: 0; border-radius: 4px; }
.shades-find-row .input { display: inline-block; vertical-align: top; width: calc(100% - 3rem); margin-left: 0.5rem; }
.shades-find-chip { display: inline-block; vertical-align: -0.25rem; width: 1.125rem; height: 1.125rem; margin-right: 0.5rem; border-radius: 4px; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.12); }
.shade-tiles { margin: 0.5rem 0 0 -1rem; font-size: 0; }
.shade-tile { display: inline-block; vertical-align: top; width: calc(50% - 1rem); margin: 1rem 0 0 1rem; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); color: var(--text); transition: transform 180ms, box-shadow 180ms, border-color 180ms; }
.shade-tile:hover, .shade-tile:focus-visible { transform: translateY(-3px); box-shadow: var(--shadow-md, 0 8px 24px rgb(0 0 0 / 0.12)); }
.shade-tile.is-match { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); transform: translateY(-3px); }
.shade-tile-strip { display: block; height: 5.5rem; background-size: 100% 100%; transition: background-size 400ms; }
.shade-tile:hover .shade-tile-strip { background-size: 140% 100%; }
.shade-tile-text { display: block; padding: 0.625rem 0.875rem 0.75rem; }
.shade-tile-title { display: block; font-size: 1rem; font-weight: 650; }
.shade-tile-count { display: block; font-size: 0.75rem; color: var(--text-muted); }
@media (min-width: 640px) { .shade-tile { width: calc(33.333% - 1rem); } }
@media (min-width: 1024px) { .shade-tile { width: calc(25% - 1rem); } }
@media (prefers-reduced-motion: reduce) { .shade-tile, .shade-tile-strip { transition: none; } }
.shades-intro{display:flow-root}
.shades-hero{margin:0 0 1.5rem}
.shades-hero img{display:block;width:100%;height:auto;border:1px solid var(--border);border-radius:var(--radius-lg)}
@media (min-width:1024px){.shades-hero{float:right;width:460px;margin:0 0 1rem 2rem}}
.shades-example{margin-top:1.25rem}
.shades-example-row{margin-bottom:.375rem;font-size:0;white-space:nowrap}
.shades-example-label{display:inline-block;vertical-align:middle;width:4.5rem;font-size:.8125rem;font-weight:600}
.shades-example-strip{display:inline-block;vertical-align:middle;width:calc(100% - 4.5rem);overflow:hidden;border-radius:var(--radius-sm)}
.shades-example-strip span{display:inline-block;vertical-align:top;width:14.2857%;height:1.75rem}
.shades-gen-controls{margin-top:1rem;font-size:0}
.shades-gen-controls>*{display:inline-block;vertical-align:middle;margin:0 1.25rem .75rem 0;font-size:.875rem}
.shades-gen-input{width:18rem;max-width:100%}
.shades-gen-steps input{vertical-align:middle;width:8rem;margin:0 .375rem}
.shades-gen-row{margin-top:1rem}
.shades-gen-head{margin-bottom:.375rem;line-height:2rem}
.shades-gen-actions{float:right}
.shades-gen-swatches{overflow:hidden;font-size:0;white-space:nowrap;border-radius:var(--radius-md);box-shadow:inset 0 0 0 1px var(--border)}
.shades-gen-sw{display:inline-block;vertical-align:top;height:4.5rem;padding:0;border:0;border-radius:0;font:600 .625rem/1 var(--font-mono);text-align:center;cursor:copy}
.shades-gen-sw span{display:block;padding-top:3.25rem;opacity:.85}
.shades-gen-sw:hover,.shades-gen-sw:focus-visible{box-shadow:inset 0 0 0 2px currentColor;outline:0}
@media (max-width:639px){.shades-gen-sw span{display:none}}
.shades-chart h2,.shades-tools-title{margin-bottom:.25rem;font-size:1.25rem;font-weight:650}
.shades-bars{margin:1rem 0 0;padding:0;list-style:none}
.shades-bars li{margin:0 0 .375rem}
.shades-bars a{display:block;font-size:0;color:var(--text)}
.shades-bars a:hover .shades-bar-label{color:var(--accent)}
.shades-bar-label{display:inline-block;vertical-align:middle;width:5rem;font-size:.875rem;font-weight:600}
.shades-bar-track{display:inline-block;vertical-align:middle;width:calc(100% - 9rem);height:1.25rem}
.shades-bar{display:block;height:100%;overflow:hidden;border-radius:4px;background-image:linear-gradient(rgb(255 255 255/.6),rgb(255 255 255/.6));box-shadow:inset 0 0 0 1px rgb(0 0 0/.12)}
.shades-bar-classic{display:block;height:100%}
.shades-bar-num{display:inline-block;vertical-align:middle;width:4rem;font:.8125rem var(--font-mono);text-align:right;color:var(--text-muted)}
.shades-tools{margin:.25rem 0 0 -1rem;font-size:0}
.shades-tool{display:inline-block;vertical-align:top;width:calc(100% - 1rem);margin:1rem 0 0 1rem;padding:1rem;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);font-size:1rem;color:var(--text);transition:transform 160ms,box-shadow 160ms}
.shades-tool:hover{transform:translateY(-2px);box-shadow:var(--shadow-md,0 6px 18px rgb(0 0 0/.12))}
.shades-tool svg{display:block;margin-bottom:.5rem;color:var(--accent)}
.shades-tool-title{display:block;font-weight:650}
.shades-tool-desc{display:block;margin-top:.25rem;font-size:.8125rem;color:var(--text-muted)}
@media (min-width:640px){.shades-tool{width:calc(50% - 1rem)}}
@media (min-width:1024px){.shades-tool{width:calc(33.333% - 1rem)}}

/* ---- Family page ---- */
.shades-lead { max-width: 48rem; margin-top: -0.5rem; }
.shade-nav { margin: 1rem 0 1.25rem; overflow-x: auto; white-space: nowrap; font-size: 0; scrollbar-width: none; }
.shade-nav::-webkit-scrollbar { display: none; }
.shade-nav-chip { display: inline-block; vertical-align: top; height: 1.875rem; margin-right: 0.375rem; padding: 0 0.75rem; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); font-size: 0.75rem; font-weight: 500; line-height: 1.75rem; color: var(--text-muted); }
.shade-nav-chip:hover { color: var(--text); border-color: var(--border-strong); }
.shade-nav-chip.is-active { border-color: var(--text); background: var(--text); color: var(--bg); }
.shade-dot { display: inline-block; vertical-align: middle; width: 0.625rem; height: 0.625rem; margin: -0.125rem 0.375rem 0 0; border-radius: 50%; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.15); }

.shade-map-wrap { position: relative; padding: 0 0 1.25rem 1.25rem; }
.shade-map { display: block; width: 100%; height: 15rem; border-radius: var(--radius-md); background: var(--surface-2); --grid: color-mix(in srgb, var(--text) 10%, transparent); --ring: var(--accent); touch-action: manipulation; }
@media (min-width: 768px) { .shade-map { height: 20rem; } }
.shade-axis { position: absolute; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-faint); }
.shade-axis-x { right: 0; bottom: 0; }
.shade-axis-y { top: 0; left: 0; writing-mode: vertical-rl; transform: rotate(180deg); }
.shade-map-tip { position: absolute; z-index: 2; padding: 0.375rem 0.625rem 0.375rem 0.375rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-lg); font-size: 0.75rem; line-height: 1.35; white-space: nowrap; pointer-events: none; }
.shade-map-tip > span { display: inline-block; vertical-align: middle; }
.shade-map-tip-sw { width: 1.75rem; height: 1.75rem; margin-right: 0.5rem; border-radius: var(--radius-sm); box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.1); }

.shade-toolbar { position: sticky; top: var(--header-h); z-index: 5; margin: 1.25rem -0.25rem 0; padding: 0.75rem 0.25rem 0.5rem; background: var(--bg); }
.shade-search { position: relative; display: inline-block; vertical-align: middle; width: 100%; margin-bottom: 0.5rem; }
.shade-search svg { position: absolute; top: 0.75rem; left: 0.75rem; color: var(--text-faint); pointer-events: none; }
.shade-search .input { padding-left: 2.25rem; }
.shade-filters { display: inline-block; vertical-align: middle; font-size: 0; }
.shade-filters > * { margin: 0 0.5rem 0.5rem 0; vertical-align: middle; }
.shade-sort { display: inline-block; width: 9.5rem; } .shade-sort .select { height: 2rem; font-size: 0.8125rem; }
@media (min-width: 1024px) { .shade-search { width: 18rem; margin-right: 0.75rem; } }
.shade-count { margin-top: 0.25rem; }
.shade-more { margin-left: 0.5rem; padding: 0.125rem 0.5rem; border: 1px dashed var(--border-strong); border-radius: 999px; font-size: 0.75rem; color: var(--accent); }
.shade-more:hover { border-style: solid; } .shade-more svg { vertical-align: -0.125rem; }
.shade-more:disabled { opacity: 0.6; cursor: progress; }

.shade-cards { margin: 0.25rem 0 0 -0.75rem; font-size: 0; }
.shade-card { display: inline-block; vertical-align: top; width: calc(50% - 0.75rem); margin: 0.75rem 0 0 0.75rem; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-sm); transition: transform 160ms, box-shadow 160ms; }
.shade-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md, 0 6px 18px rgb(0 0 0 / 0.12)); }
.shade-sw { position: relative; display: block; width: 100%; height: 5rem; cursor: copy; }
.shade-sw::after { content: "+"; position: absolute; top: 0.375rem; right: 0.375rem; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: rgb(255 255 255 / 0.9); font-size: 1rem; font-weight: 600; line-height: 1.5rem; text-align: center; color: #111; opacity: 0; transform: scale(0.7); transition: opacity 150ms, transform 150ms; }
.shade-card:hover .shade-sw::after, .shade-sw:focus-visible::after { opacity: 1; transform: none; }
.shade-card.is-picked .shade-sw::after { content: "✓"; opacity: 1; transform: none; background: var(--accent); color: #fff; }
.shade-card.is-picked { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); }
.shade-name { display: block; padding: 0.4375rem 0.625rem 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.8125rem; font-weight: 600; color: var(--text); }
.shade-name:hover { color: var(--accent); }
.shade-hex { display: block; padding: 0 0.625rem 0.5rem; font-family: var(--font-mono); font-size: 0.6875rem; color: var(--text-faint); }
.shade-card.is-community .shade-name { font-weight: 500; }
.shade-card.is-flash { animation: shade-flash 1.4s ease-out; }
@keyframes shade-flash { 0%, 30% { box-shadow: 0 0 0 3px var(--bg), 0 0 0 7px var(--accent); transform: scale(1.06); } 100% { box-shadow: var(--shadow-sm); transform: none; } }
@media (min-width: 640px) { .shade-card { width: calc(33.333% - 0.75rem); } }
@media (min-width: 768px) { .shade-card { width: calc(25% - 0.75rem); } }
@media (min-width: 1024px) { .shade-card { width: calc(16.666% - 0.75rem); } }
@media (prefers-reduced-motion: reduce) { .shade-card, .shade-sw::after { transition: none; } .shade-card.is-flash { animation: none; } }

/* Palette tray, fixed at the bottom while it has colors */
.shade-tray { position: fixed; z-index: 30; left: 0; right: 0; bottom: 1rem; padding: 0 1rem; pointer-events: none; }
.shade-tray[hidden] { display: none; }
.shade-tray-inner { max-width: 44rem; margin: 0 auto; padding: 0.5rem 0.5rem 0.5rem 0.875rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: 0 12px 32px rgb(0 0 0 / 0.2); white-space: nowrap; pointer-events: auto; animation: fade-up 180ms ease-out both; }
.shade-tray-label { display: none; vertical-align: middle; margin-right: 0.75rem; font-size: 0.75rem; font-weight: 600; color: var(--text-muted); }
@media (min-width: 640px) { .shade-tray-label { display: inline-block; } }
.shade-tray-swatches { display: inline-block; vertical-align: middle; max-width: calc(100% - 13rem); overflow-x: auto; font-size: 0; scrollbar-width: none; }
.shade-tray-sw { display: inline-block; vertical-align: top; width: 2rem; height: 2rem; margin-right: 0.25rem; border-radius: var(--radius-sm); box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.1); transition: transform 120ms; }
.shade-tray-sw:hover { transform: translateY(-2px); }
.shade-tray-actions { float: right; font-size: 0; } .shade-tray-actions > * { margin-left: 0.25rem; vertical-align: middle; }