/* ============================================================
   قلموم — آزمایشگاه پالت رنگ (/palettes/) — فقط همین مسیر بارگذاری می‌شود.
   سربرگ صفحه (.gh-tools-hero) در base.css مشترک با آرشیو فونت‌هاست.
   ============================================================ */

/* ---------- ژنراتور اصلی ---------- */
.gh-palgen {
	background: var(--gh-bg-raised); border: 1px solid var(--gh-border-default); border-radius: var(--gh-radius-card);
	overflow: hidden; box-shadow: var(--gh-shadow-2); margin-block: 24px 48px;
}
.gh-palgen-swatches { display: flex; height: 320px; }
.gh-pal-swatch {
	position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column;
	align-items: center; justify-content: flex-end; padding-block-end: 22px; cursor: pointer;
	border: none; transition: flex-grow var(--gh-dur-base) var(--gh-ease-out);
}
.gh-pal-copy {
	position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center;
	padding: 0 8px 22px; border: 0; background: transparent; color: inherit; cursor: pointer;
}
.gh-pal-swatch:hover { flex-grow: 1.15; }
.gh-pal-swatch-hex {
	font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 15px; font-weight: 700;
	direction: ltr; letter-spacing: .02em; padding: 8px 14px; border-radius: var(--gh-r-full);
	background: color-mix(in srgb, var(--gh-white) 18%, transparent); backdrop-filter: blur(6px);
	opacity: 0; transform: translateY(6px); transition: all var(--gh-dur-fast) var(--gh-ease-out);
}
.gh-pal-swatch:hover .gh-pal-swatch-hex, .gh-pal-copy:focus-visible .gh-pal-swatch-hex { opacity: 1; transform: translateY(0); }
.gh-pal-swatch-copied { opacity: 1 !important; transform: translateY(0) !important; }
.gh-pal-lock {
	position: absolute; top: 16px; inset-inline-end: 16px; width: 34px; height: 34px; border-radius: 50%;
	z-index: 1;
	display: grid; place-items: center; border: none; cursor: pointer;
	background: color-mix(in srgb, var(--gh-white) 16%, transparent); color: color-mix(in srgb, var(--gh-white) 85%, transparent); backdrop-filter: blur(6px);
	opacity: 0; transition: all var(--gh-dur-fast) var(--gh-ease-out);
}
.gh-pal-swatch:hover .gh-pal-lock, .gh-pal-lock:focus-visible, .gh-pal-lock.is-locked { opacity: 1; }
.gh-pal-lock:hover { background: color-mix(in srgb, var(--gh-white) 30%, transparent); }
.gh-pal-lock svg { width: 16px; height: 16px; }
.gh-pal-lock .gh-ic-unlocked { display: block; }
.gh-pal-lock .gh-ic-locked { display: none; }
.gh-pal-lock.is-locked .gh-ic-unlocked { display: none; }
.gh-pal-lock.is-locked .gh-ic-locked { display: block; }

.gh-palgen-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 18px 22px; border-block-start: 1px solid var(--gh-border-subtle); }
.gh-palgen-kbd {
	font-family: ui-monospace, Menlo, monospace; font-size: 10.5px; font-weight: 700; direction: ltr;
	background: color-mix(in srgb, var(--gh-white) 18%, transparent); border: 1px solid color-mix(in srgb, var(--gh-white) 30%, transparent); border-radius: var(--gh-radius-micro); padding: 2px 7px; margin-inline-start: 4px;
}
.gh-palgen-hint { font-size: 12.5px; color: var(--gh-text-tertiary); flex: 1 1 220px; }

@media (max-width: 760px) {
	.gh-palgen-swatches { height: auto; flex-direction: column; }
	.gh-pal-swatch { min-height: 84px; padding-block-end: 12px; }
	.gh-pal-copy { padding-block-end: 12px; }
	.gh-pal-swatch-hex { opacity: 1; transform: none; }
	.gh-pal-lock { opacity: 1; top: 10px; inset-inline-end: 10px; width: 30px; height: 30px; }
}

/* ---------- راهنمای مصور استفاده از رنگ ---------- */
.gh-palinfo { margin-block: 96px 0; scroll-margin-block-start: 110px; }
.gh-pal-guide-link { margin-block-start: 18px; }
.gh-palinfo-teasers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-block-start: 18px; }
.gh-palinfo-teaser {
	display: flex; flex-direction: column; gap: 6px; padding: 18px 16px;
	background: var(--gh-bg-raised); border: 1px solid var(--gh-border-default); border-radius: var(--gh-radius-group);
}
.gh-palinfo-ic {
	width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--gh-radius-control);
	background: var(--gh-accent-surface); color: var(--gh-accent-text); margin-block-end: 4px;
}
.gh-palinfo-ic svg { width: 18px; height: 18px; }
.gh-palinfo-teaser b { font-size: 13.5px; color: var(--gh-text-primary); }
.gh-palinfo-teaser span { font-size: 12.5px; color: var(--gh-text-tertiary); line-height: 1.6; }

.gh-palinfo-toggle {
	display: flex; align-items: center; gap: 8px; margin-block: 18px auto; width: fit-content;
}
.gh-palinfo-toggle svg { width: 16px; height: 16px; transition: transform var(--gh-dur-fast) var(--gh-ease-out); }
.gh-palinfo-toggle.is-open svg { transform: rotate(180deg); }

.gh-palinfo-full {
	display: flex; flex-direction: column; gap: 28px; margin-block-start: 8px; padding: 28px;
	background: var(--gh-bg-raised); border: 1px solid var(--gh-border-default); border-radius: var(--gh-radius-card);
}
.gh-palinfo-full[hidden] { display: none; }
.gh-palinfo-block h3 { font-size: 16px; margin-block-end: 8px; color: var(--gh-text-primary); }
.gh-palinfo-block > p { font-size: 13.5px; color: var(--gh-text-secondary); line-height: 1.85; margin-block-end: 14px; }
.gh-palinfo-list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.gh-palinfo-list li { font-size: 13px; line-height: 1.8; color: var(--gh-text-secondary); }
.gh-palinfo-list li b { color: var(--gh-text-primary); }

/* نوار نسبت ۶۰-۳۰-۱۰ */
.gh-ratio-bar { display: flex; height: 40px; border-radius: var(--gh-radius-control); overflow: hidden; margin-block-end: 16px; box-shadow: var(--gh-shadow-1); }
.gh-ratio-60 { flex: 6; }
.gh-ratio-30 { flex: 3; }
.gh-ratio-10 { flex: 1; }

/* هارمونی رنگ */
.gh-harmony-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.gh-harmony-card {
	display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 16px 12px;
	background: var(--gh-bg-sunken); border: 1px solid var(--gh-border-subtle); border-radius: var(--gh-radius-group);
}
.gh-harmony-card b { font-size: 13px; color: var(--gh-text-primary); }
.gh-harmony-card span { font-size: 12px; color: var(--gh-text-tertiary); line-height: 1.7; }
.gh-harmony-wheel {
	display: block; width: 56px; height: 56px; border-radius: 50%; margin-block-end: 4px;
	background: conic-gradient(from 0deg, #E11D48, #F59E0B, #EAB308, #22C55E, #06B6D4, #3B82F6, #8B5CF6, #EC4899, #E11D48);
	position: relative;
}
.gh-harmony-wheel::before { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: var(--gh-bg-sunken); }
.gh-harmony-wheel::after { content: ""; position: absolute; inset: 0; border-radius: 50%; }
.gh-harmony-wheel[data-harmony="complementary"] { mask: radial-gradient(circle, transparent 62%, #000 63%), conic-gradient(#000 0 8%, transparent 8% 42%, #000 42% 50%, transparent 50% 92%, #000 92%); mask-composite: intersect; -webkit-mask-composite: source-in; }
.gh-harmony-wheel[data-harmony="analogous"] { mask: radial-gradient(circle, transparent 62%, #000 63%), conic-gradient(#000 0 22%, transparent 22% 100%); mask-composite: intersect; -webkit-mask-composite: source-in; }
.gh-harmony-wheel[data-harmony="triadic"] { mask: radial-gradient(circle, transparent 62%, #000 63%), conic-gradient(#000 0 6%, transparent 6% 27%, #000 27% 39%, transparent 39% 61%, #000 61% 73%, transparent 73% 94%, #000 94%); mask-composite: intersect; -webkit-mask-composite: source-in; }
.gh-harmony-wheel[data-harmony="monochrome"] { filter: grayscale(1); mask: radial-gradient(circle, transparent 62%, #000 63%); -webkit-mask: radial-gradient(circle, transparent 62%, #000 63%); }

/* کنتراست */
.gh-contrast-demo { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.gh-contrast-sample {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
	padding: 22px; border-radius: var(--gh-radius-group); text-align: center;
}
.gh-contrast-sample.is-good { background: #0F172A; }
.gh-contrast-sample.is-good span { color: #F8FAFC; font-weight: 700; font-size: 15px; }
.gh-contrast-sample.is-good small { color: #4ADE80; font-size: 11.5px; }
.gh-contrast-sample.is-bad { background: #94A3B8; }
.gh-contrast-sample.is-bad span { color: #B8C2CE; font-weight: 700; font-size: 15px; }
.gh-contrast-sample.is-bad small { color: #7A2E2E; font-size: 11.5px; }

/* روان‌شناسی رنگ */
.gh-psych-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.gh-psych-item {
	display: flex; align-items: center; gap: 10px; padding: 10px 12px;
	background: var(--gh-bg-sunken); border: 1px solid var(--gh-border-subtle); border-radius: var(--gh-radius-control);
}
.gh-psych-item i { width: 26px; height: 26px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gh-black) 8%, transparent); }
.gh-psych-item div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gh-psych-item b { font-size: 12.5px; color: var(--gh-text-primary); }
.gh-psych-item span { font-size: 11.5px; color: var(--gh-text-tertiary); line-height: 1.5; }

@media (max-width: 900px) {
	.gh-palinfo-teasers, .gh-harmony-grid, .gh-psych-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.gh-palinfo-teasers, .gh-harmony-grid, .gh-psych-grid, .gh-contrast-demo { grid-template-columns: 1fr; }
	.gh-palinfo-full { padding: 20px 16px; }
}

/* ---------- تایتل‌بار خلوت گالری ---------- */
.gh-palettes-gallery .gh-sec-head { align-items: flex-end; gap: 24px; }
.gh-palettes-gallery .gh-sec-head h2::before { display: none; }
.gh-pal-gallery-title .gh-hint { margin: 6px 0 0; }
.gh-pal-count-badge {
	display: inline-flex; align-items: center; gap: 4px; margin: 0; vertical-align: middle;
	font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap;
	color: var(--gh-accent-text); background: var(--gh-accent-surface); border: 1px solid var(--gh-accent-border);
	padding: 3px 11px; border-radius: var(--gh-r-full);
}

/* ---------- فیلتر دسته ---------- */
.gh-palchips { display: flex; flex-wrap: wrap; gap: 8px; margin-block: 4px 10px; }
.gh-palchips .gh-chip { font-family: inherit; letter-spacing: normal; }

/* ---------- گالری پالت‌های آماده ---------- */
.gh-palgallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.gh-palcard {
	position: relative; background: var(--gh-bg-raised); border: 1px solid var(--gh-border-default); border-radius: var(--gh-radius-card);
	overflow: hidden; transition: all var(--gh-dur-fast) var(--gh-ease-out);
}
.gh-palcard:hover { transform: translateY(-3px); box-shadow: var(--gh-shadow-2); border-color: var(--gh-border-strong); }
.gh-palcard-body {
	display: flex; flex-direction: column; width: 100%; cursor: pointer; text-align: start;
	background: none; border: none; padding: 0; font: inherit; color: inherit;
}
.gh-palcard-strip { display: flex; height: 118px; }
.gh-palcard-strip span { flex: 1; }
.gh-palcard-name { padding: 12px 14px; font-size: 13px; font-weight: 700; color: var(--gh-text-primary); }

@media (max-width: 900px) { .gh-palgallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
	.gh-palettes-gallery .gh-sec-head { align-items: flex-start; }
	.gh-palgallery { grid-template-columns: 1fr; }
}

/* گریدهای این ابزار با شبکه‌ی چهارتایی و gap مرکزی کل سایت هم‌ریتم هستند. */
.gh-palgallery,
.gh-palinfo-teasers,
.gh-harmony-grid,
.gh-psych-grid {
	gap: var(--gh-grid-gap, 24px);
}

@media (max-width: 1180px) {
	.gh-palgallery {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 900px) {
	.gh-palgallery,
	.gh-palinfo-teasers,
	.gh-harmony-grid,
	.gh-psych-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--gh-grid-gap, 18px);
	}
}

@media (max-width: 560px) {
	.gh-palgallery,
	.gh-palinfo-teasers,
	.gh-harmony-grid,
	.gh-psych-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

.gh-palcard code,
.gh-contrast-sample small,
.gh-psych-item span {
	font-size: var(--gh-font-micro, 12px);
}