/* ColorKit color modal + similar colors + section nav  v1.1.0
 * Shipped as a real stylesheet (not JS-injected) so layout never depends on JS.
 * z-index scale: section nav 30, modal overlay 1000. */

/* ---------------- sticky section nav ---------------- */
.ck-section-nav{
	position:sticky;
	top:0;
	z-index:30;
	margin:0 auto 1.4em;
	background:rgba(255,255,255,.85);
	-webkit-backdrop-filter:saturate(1.6) blur(10px);
	backdrop-filter:saturate(1.6) blur(10px);
	border-bottom:1px solid #ececf3;
}
.ck-section-nav-inner{
	display:flex;
	gap:2px;
	max-width:1080px;
	margin:0 auto;
	padding:7px 12px;
	overflow-x:auto;
	scrollbar-width:none;
	/* Center when the links fit; the "safe" keyword falls back to left-aligned
	   on overflow (mobile) so the first item stays reachable and scrollable. */
	justify-content:center;
	justify-content:safe center;
}
.ck-section-nav-inner::-webkit-scrollbar{ display:none; }
.ck-section-nav-inner a{
	white-space:nowrap;
	padding:9px 14px;
	border-radius:999px;
	font-size:.86em;
	font-weight:600;
	line-height:1;
	color:#55556a;
	text-decoration:none;
	transition:background-color .12s ease, color .12s ease;
}
.ck-section-nav-inner a.active{ background:#eef0ff; color:#4f46e5; }
@media (hover:hover){
	.ck-section-nav-inner a:hover{ background:#f1f1f8; color:#1c1b29; }
}
#tool-output h2[id]{ scroll-margin-top:70px; }

/* ---------------- similar colors grid ---------------- */
.similar-colors-grid{
	display:grid;
	grid-template-columns:repeat(auto-fill,minmax(118px,1fr));
	gap:12px;
	max-width:1080px;
	margin:1.2em auto 0;
	padding:0 1em;
}
.ck-similar-swatch{
	display:flex;
	flex-direction:column;
	justify-content:flex-end;
	min-height:104px;
	padding:12px;
	border-radius:14px;
	text-decoration:none;
	box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);
	transition:transform .14s ease, box-shadow .14s ease;
}
.ck-similar-name{ font-weight:700; font-size:.85em; line-height:1.18; }
.ck-similar-hex{
	font-size:.72em;
	opacity:.85;
	font-variant-numeric:tabular-nums;
	font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}
@media (hover:hover){
	.ck-similar-swatch:hover{ transform:translateY(-3px); box-shadow:0 10px 24px rgba(20,18,33,.16); }
}

/* ---------------- modal ---------------- */
.ck-cm-overlay{
	position:fixed;
	inset:0;
	z-index:1000;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:16px;
	background:rgba(20,18,33,.55);
	opacity:0;
	transition:opacity .16s ease;
	-webkit-backdrop-filter:blur(3px);
	backdrop-filter:blur(3px);
	overscroll-behavior:contain;
}
.ck-cm-overlay.open{ opacity:1; }
.ck-cm-panel{
	width:100%;
	max-width:500px;
	max-height:88vh;
	display:flex;
	flex-direction:column;
	overflow:hidden; /* one rounded, non-scrolling container clips children cleanly */
	background:#fff;
	border-radius:20px;
	box-shadow:0 24px 70px rgba(20,18,33,.34);
	transform:translateY(10px) scale(.985);
	transition:transform .18s cubic-bezier(.2,.8,.3,1);
}
.ck-cm-overlay.open .ck-cm-panel{ transform:none; }
/* hero stays pinned; only the body scrolls */
.ck-cm-hero{ position:relative; padding:26px 22px 20px; flex:0 0 auto; }
.ck-cm-hero-name{ font-size:1.5em; font-weight:800; line-height:1.15; letter-spacing:-.01em; }
.ck-cm-hero-hex{
	font-size:.95em;
	opacity:.82;
	margin-top:2px;
	font-variant-numeric:tabular-nums;
	font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}
.ck-cm-close{
	position:absolute;
	top:14px;
	right:14px;
	width:36px;
	height:36px;
	border:none;
	border-radius:50%;
	background:rgba(255,255,255,.22);
	font-size:22px;
	line-height:1;
	cursor:pointer;
	display:flex;
	align-items:center;
	justify-content:center;
	transition:background-color .12s ease;
}
@media (hover:hover){ .ck-cm-close:hover{ background:rgba(255,255,255,.42); } }
.ck-cm-body{
	padding:18px 20px 22px;
	flex:1 1 auto;
	min-height:0; /* let the flex child shrink below content height so it scrolls */
	overflow-y:auto;
	overscroll-behavior:contain;
	-webkit-overflow-scrolling:touch;
	scrollbar-width:thin;
	scrollbar-color:rgba(20,18,33,.22) transparent;
}
.ck-cm-body::-webkit-scrollbar{ width:10px; }
.ck-cm-body::-webkit-scrollbar-thumb{ background:rgba(20,18,33,.2); border-radius:10px; border:3px solid #fff; }
.ck-cm-body::-webkit-scrollbar-track{ background:transparent; }
.ck-cm-actions{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; }
.ck-cm-btn{
	flex:1;
	min-width:104px;
	min-height:44px;
	display:flex;
	align-items:center;
	justify-content:center;
	text-align:center;
	padding:10px 12px;
	border-radius:11px;
	border:1px solid #e7e7ef;
	background:#f6f6fb;
	color:#1c1b29;
	font-weight:600;
	font-size:.86em;
	cursor:pointer;
	text-decoration:none;
	transition:background-color .12s ease, border-color .12s ease;
}
.ck-cm-btn.primary{ background:#4f46e5; border-color:#4f46e5; color:#fff; }
@media (hover:hover){
	.ck-cm-btn:hover{ border-color:#c9c9da; background:#eeeef6; }
	.ck-cm-btn.primary:hover{ background:#4338ca; border-color:#4338ca; }
}
.ck-cm-section-label{
	font-size:.7em;
	font-weight:700;
	text-transform:uppercase;
	letter-spacing:.06em;
	color:#9a9aac;
	margin:18px 0 9px;
}
.ck-cm-conv-grid{ display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.ck-cm-conv{
	display:flex;
	flex-direction:column;
	align-items:flex-start;
	gap:1px;
	padding:8px 11px;
	border-radius:9px;
	border:1px solid #ededf3;
	background:#fafafd;
	cursor:pointer;
	text-align:left;
	transition:background-color .1s ease, border-color .1s ease;
}
@media (hover:hover){ .ck-cm-conv:hover{ border-color:#c9c9da; background:#f2f2f9; } }
.ck-cm-conv-k{ font-size:.64em; font-weight:700; letter-spacing:.05em; color:#9a9aac; text-transform:uppercase; }
.ck-cm-conv-v{
	font-size:.8em;
	color:#1c1b29;
	font-variant-numeric:tabular-nums;
	font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}
.ck-cm-harm-grid{ display:flex; flex-direction:column; gap:11px; }
.ck-cm-harm-label{ font-size:.78em; font-weight:600; color:#54546a; margin-bottom:5px; }
.ck-cm-harm-row{ display:flex; gap:7px; }
.ck-cm-mini{
	flex:1;
	height:44px;
	border:none;
	border-radius:9px;
	cursor:pointer;
	box-shadow:inset 0 0 0 1px rgba(0,0,0,.07);
	transition:transform .1s ease;
}
.ck-cm-shades{ display:flex; gap:2px; }
.ck-cm-shade{
	flex:1;
	height:30px;
	border:none;
	border-radius:5px;
	cursor:pointer;
	box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);
	transition:transform .1s ease;
}
.ck-cm-footlink{
	display:block;
	margin-top:20px;
	padding-top:16px;
	border-top:1px solid #ededf3;
	text-align:center;
	color:#4f46e5;
	font-weight:600;
	font-size:.9em;
	text-decoration:none;
}
@media (hover:hover){
	.ck-cm-mini:hover, .ck-cm-shade:hover{ transform:translateY(-2px); }
	.ck-cm-footlink:hover{ text-decoration:underline; }
}

@media (max-width:600px){
	.similar-colors-grid{ grid-template-columns:repeat(auto-fill,minmax(100px,1fr)); }
}
@media (prefers-reduced-motion:reduce){
	.ck-cm-overlay, .ck-cm-panel, .ck-cm-mini, .ck-cm-shade,
	.ck-similar-swatch, .ck-cm-btn, .ck-cm-conv, .ck-cm-close,
	.ck-section-nav-inner a{ transition:none; }
	.ck-cm-panel{ transform:none; }
}