/*
 * learn.css
 * Shared by the Learn hub (module/learn/hub.php) and Learn articles (single.php):
 * guide cards (.swk-card), topic illustrations (.swk-art, from sw_learn_art()),
 * the article sidebar (.swa-side: table of contents + "Up next"), and the
 * "Keep learning" section under articles (.swa-more).
 *
 * @package Swatching
 */

/* Tokens for article pages (the hub gets the same ones from .swh) */
.swa-side,
.swa-more {
	--card:   #16161d;
	--card-2: #1f1f28;
	--card-3: #2a2a35;
	--line:   rgba(255, 255, 255, 0.08);
	--text:   #ffffff;
	--text-2: #a9acb8;
	--text-3: #8e92a3;
	--green:  #22c55e;
	--learn:  #e9c46a;
	--ease:   180ms ease-out;
	--sans:   'Figtree', system-ui, sans-serif;
	--mono:   'Source Code Pro', ui-monospace, monospace;
	font-family: var(--sans);
}

.swk-art { --mono: 'Source Code Pro', ui-monospace, monospace; }


/* ============================================================
   GUIDE CARDS
   ============================================================ */

.swk-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 18px;
}

.swk-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	border-radius: 14px;
	overflow: hidden;
	background: var(--card);
	color: var(--text);
	text-decoration: none;
	transition: background var(--ease), transform var(--ease);
}

.swk-card:hover { background: var(--card-2); transform: translateY(-3px); color: var(--text); }

.swk-card-body { display: flex; flex-direction: column; gap: 6px; flex: 1; padding: 14px 16px 16px; }

.swk-card-tag {
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: hsl(var(--th) 70% 66%);
}

.swk-card-title { font-size: 1.05rem; font-weight: 800; line-height: 1.3; }

.swk-card-desc {
	flex: 1;
	font-size: 0.9rem;
	line-height: 1.5;
	color: var(--text-2);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.swk-done { color: var(--green); }

.swk-card-meta { font-size: 0.8rem; font-weight: 600; color: var(--text-3); }


@media (max-width: 640px) {
	/* Guides become a compact list: small illustration on the left */
	.swk-grid { grid-template-columns: 1fr; gap: 10px; }
	.swk-card { flex-direction: row; align-items: center; padding: 10px; gap: 2px; }
	.swk-card > .swk-art { flex: 0 0 112px; border-radius: 10px; }
	.swk-card-body { padding: 2px 6px 2px 12px; gap: 3px; }
	.swk-card-title { font-size: 0.98rem; }
	.swk-card-desc { font-size: 0.85rem; -webkit-line-clamp: 2; }
	.swk-card-tag { font-size: 0.68rem; }
}


/* ============================================================
   LEARN — TOPIC ILLUSTRATIONS (inc/learn.php → sw_learn_art())
   Each is drawn in CSS inside a 2:1 frame. Sizes use cqw (container
   width) so the same art works as a small card and a large hero.
   ============================================================ */

.swk-art {
	position: relative;
	display: block;
	aspect-ratio: 2 / 1;
	overflow: hidden;
	container-type: inline-size;
	background: #15151d;
	isolation: isolate;
}

.swk-art i, .swk-art b, .swk-art span, .swk-art svg { position: absolute; display: block; }
.swk-art .c { border-radius: 50%; width: 30cqw; aspect-ratio: 1; }

/* HEX: swatch + code split into its red, green, blue pairs */
.swk-art--hex { background: #0e1a28; }
.swk-art--hex .sw { left: 8cqw; top: 50%; width: 24cqw; aspect-ratio: 1; border-radius: 4cqw; background: #3fa7d6; transform: translateY(-50%); box-shadow: 0 2cqw 6cqw rgba(0,0,0,.4); }
.swk-art--hex .code { left: 38cqw; top: 50%; transform: translateY(-50%); font: 700 10cqw/1 var(--mono); color: #fff; letter-spacing: -0.03em; white-space: nowrap; }
.swk-art--hex em { font-style: normal; }
.swk-art--hex .r { color: #ff7a7a; }
.swk-art--hex .g { color: #6be38a; }
.swk-art--hex .b { color: #6fb2ff; }

/* RGB: light adds up to white */
.swk-art--rgb { background: #000; }
.swk-art--rgb .c { mix-blend-mode: screen; }
.swk-art--rgb .r { background: #ff2b2b; left: 27cqw; top: 4cqw; }
.swk-art--rgb .g { background: #2bff4f; left: 43cqw; top: 4cqw; }
.swk-art--rgb .b { background: #2b5bff; left: 35cqw; top: 19cqw; }

/* HSL: hue ring, saturation and lightness bars */
.swk-art--hsl { background: #17131f; }
.swk-art--hsl .ring { left: 12cqw; top: 50%; width: 36cqw; aspect-ratio: 1; border-radius: 50%; transform: translateY(-50%);
	background: conic-gradient(#f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
	-webkit-mask: radial-gradient(circle, transparent 54%, #000 55%); mask: radial-gradient(circle, transparent 54%, #000 55%); }
.swk-art--hsl .bar { top: 10cqw; width: 8cqw; height: 30cqw; border-radius: 2cqw; }
.swk-art--hsl .s { left: 60cqw; background: linear-gradient(#a855f7, #7a7085); }
.swk-art--hsl .l { left: 74cqw; background: linear-gradient(#fff, #a855f7, #000); }

/* CMYK: inks subtract down to black */
.swk-art--cmyk { background: #f3efe6; }
.swk-art--cmyk .c { mix-blend-mode: multiply; }
.swk-art--cmyk .c1 { background: #00aeef; left: 24cqw; top: 4cqw; }
.swk-art--cmyk .m  { background: #ec008c; left: 40cqw; top: 4cqw; }
.swk-art--cmyk .y  { background: #fff200; left: 32cqw; top: 19cqw; }
.swk-art--cmyk .k  { left: 76cqw; top: 30cqw; width: 12cqw; aspect-ratio: 1; border-radius: 50%; background: #1a1a1a; }

/* Pantone: fanned swatch chips */
.swk-art--pantone { background: #241e29; }
.swk-art--pantone .chip { left: 39cqw; top: 6cqw; width: 22cqw; height: 40cqw; border-radius: 1.5cqw; background: linear-gradient(var(--c) 0 68%, #fff 68%); box-shadow: 0 2cqw 5cqw rgba(0,0,0,.45); transform-origin: 50% 120%; }
.swk-art--pantone .n1 { transform: rotate(-16deg); }
.swk-art--pantone .n2 { transform: rotate(0deg); z-index: 1; }
.swk-art--pantone .n3 { transform: rotate(16deg); z-index: 2; }
.swk-art--pantone u { position: absolute; left: 2.5cqw; height: 1.4cqw; border-radius: 1cqw; background: #c9c9c9; }
.swk-art--pantone u:first-child { top: 30cqw; width: 12cqw; background: #555; }
.swk-art--pantone u:last-child { top: 34cqw; width: 8cqw; }

/* Color temperature: warm to cool light */
.swk-art--temperature { background: linear-gradient(90deg, #4a2408, #1b1712 50%, #0b1a33); }
.swk-art--temperature .glow { top: 50%; width: 34cqw; aspect-ratio: 1; border-radius: 50%; transform: translateY(-50%); }
.swk-art--temperature .w { left: 8cqw; background: radial-gradient(circle, #fff1d6 0 18%, #ffb35c 40%, rgba(255,140,40,0) 70%); }
.swk-art--temperature .c { left: 58cqw; background: radial-gradient(circle, #f2f7ff 0 18%, #8fbcff 40%, rgba(80,140,255,0) 70%); }
.swk-art--temperature b { bottom: 4cqw; font: 600 3.6cqw/1 var(--mono); color: rgba(255,255,255,.75); }
.swk-art--temperature .k1 { left: 19cqw; }
.swk-art--temperature .k2 { left: 69cqw; }

/* Tints, shades, tones: one hue from light to dark */
.swk-art--tints { background: #0f1716; }
.swk-art--tints .row { inset: 15cqw 6cqw; display: flex; gap: 1.5cqw; }
.swk-art--tints .row i { position: static; flex: 1; border-radius: 1.5cqw; }

/* High key / low key */
.swk-art--key .half { top: 0; bottom: 0; width: 50%; display: flex; align-items: center; justify-content: center; gap: 2cqw; }
.swk-art--key .hi { left: 0; background: #fbf7f0; }
.swk-art--key .lo { right: 0; background: #0c0a10; }
.swk-art--key .half i { position: static; width: 8cqw; aspect-ratio: 1; border-radius: 50%; }

/* Primary, secondary, tertiary: 12-step color wheel */
.swk-art--primary,
.swk-art--harmony { background: #14121a; }
.swk-art--primary .wheel,
.swk-art--harmony .wheel { left: 50%; top: 50%; width: 42cqw; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); }
.swk-art--primary .wheel {
	background: conic-gradient(#ff0000 0 30deg, #ff8000 0 60deg, #ffff00 0 90deg, #80ff00 0 120deg, #00ff00 0 150deg, #00ff80 0 180deg, #00ffff 0 210deg, #0080ff 0 240deg, #0000ff 0 270deg, #8000ff 0 300deg, #ff00ff 0 330deg, #ff0080 0 360deg);
	-webkit-mask: radial-gradient(circle, transparent 28%, #000 29%); mask: radial-gradient(circle, transparent 28%, #000 29%); }

/* Harmony: smooth wheel with a triad marked */
.swk-art--harmony .wheel { background: conic-gradient(#f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); opacity: 0.85; }
.swk-art--harmony .tri { left: 50%; top: 50%; width: 42cqw; aspect-ratio: 1; transform: translate(-50%, -50%); overflow: visible; }
.swk-art--harmony polygon { fill: none; stroke: #fff; stroke-width: 2.5; stroke-linejoin: round; }
.swk-art--harmony circle { fill: #fff; stroke: #14121a; stroke-width: 2; }

/* Additive vs subtractive: RGB on black, CMY on white */
.swk-art--subtractive .half { top: 0; bottom: 0; width: 50%; }
.swk-art--subtractive .add { left: 0; background: #000; }
.swk-art--subtractive .sub { right: 0; background: #f3efe6; }
.swk-art--subtractive .c { width: 18cqw; }
.swk-art--subtractive .add .c { mix-blend-mode: screen; }
.swk-art--subtractive .sub .c { mix-blend-mode: multiply; }
.swk-art--subtractive .r, .swk-art--subtractive .c1 { left: 8cqw; top: 7cqw; }
.swk-art--subtractive .g, .swk-art--subtractive .m  { left: 21cqw; top: 7cqw; }
.swk-art--subtractive .b, .swk-art--subtractive .y  { left: 14.5cqw; top: 19cqw; }
.swk-art--subtractive .r { background: #ff2b2b; }
.swk-art--subtractive .g { background: #2bff4f; }
.swk-art--subtractive .b { background: #2b5bff; }
.swk-art--subtractive .c1 { background: #00aeef; }
.swk-art--subtractive .m { background: #ec008c; }
.swk-art--subtractive .y { background: #fff200; }

/* Palette: a five-color strip on a card */
.swk-art--palette { background: #1d1a17; }
.swk-art--palette .strip { left: 14cqw; right: 14cqw; top: 12cqw; bottom: 12cqw; display: flex; border-radius: 3cqw; overflow: hidden; box-shadow: 0 2cqw 6cqw rgba(0,0,0,.45); transform: rotate(-4deg); }
.swk-art--palette .strip i { position: static; flex: 1; }

/* Screens: the same blue, three slightly different screens */
.swk-art--screen { background: #0d1118; }
.swk-art--screen .dev { background: var(--c); border: 1.4cqw solid #2b2f38; border-radius: 2cqw; box-shadow: 0 2cqw 5cqw rgba(0,0,0,.5); }
.swk-art--screen .laptop { left: 6cqw; top: 9cqw; width: 44cqw; height: 28cqw; }
.swk-art--screen .tab { left: 55cqw; top: 13cqw; width: 22cqw; height: 30cqw; }
.swk-art--screen .phone { left: 81cqw; top: 21cqw; width: 12cqw; height: 22cqw; border-radius: 2.5cqw; }

/* Light: one ball under warm light, one under cool light */
.swk-art--light { background: radial-gradient(circle at 25% 0, #3a2a12, transparent 60%), radial-gradient(circle at 75% 0, #12233a, transparent 60%), #0d0c10; }
.swk-art--light .ball { top: 12cqw; width: 26cqw; aspect-ratio: 1; border-radius: 50%; }
.swk-art--light .w { left: 14cqw; background: radial-gradient(circle at 35% 30%, #fff1d1, #e98a3c 45%, #5a2a10 85%); }
.swk-art--light .c { left: 60cqw; background: radial-gradient(circle at 35% 30%, #eef6ff, #6f8fcf 45%, #1c2747 85%); }

/* Value: colors and their grayscale twins */
.swk-art--value { background: #121214; }
.swk-art--value .row { left: 22cqw; right: 22cqw; display: flex; gap: 3cqw; }
.swk-art--value .row:first-child { top: 8cqw; }
.swk-art--value .gray { top: 27cqw; }
.swk-art--value .row i { position: static; flex: 1; aspect-ratio: 1; border-radius: 2cqw; }

/* Neutrals: warm, balanced, cool grays */
.swk-art--neutral { background: #161514; }
.swk-art--neutral .stack { inset: 8cqw 10cqw; display: flex; flex-direction: column; gap: 2.5cqw; }
.swk-art--neutral .stack i { position: static; flex: 1; border-radius: 2cqw; }

/* Fallback (sw_cover art) */
.swh-cover.swk-art--cover { aspect-ratio: 2 / 1; margin: 0; border-radius: 0; box-shadow: none; padding: 16px 18px; }


/* Fallback art for a topic without its own illustration */
.swk-art--cover { background: var(--cv-bg, #333); }
.swk-art--cover::before { content: ''; position: absolute; width: 60%; aspect-ratio: 1; right: -12%; top: -40%; border-radius: 50%; background: var(--cv-a, #555); }
.swk-art--cover .swh-cover-label { position: absolute; left: 16px; bottom: 12px; z-index: 1; font: 900 clamp(1.1rem, 9cqw, 1.8rem)/1 'Figtree', sans-serif; letter-spacing: -0.03em; color: #fff; }


/* ============================================================
   ARTICLE SIDEBAR (single.php)
   The ad scrolls away; .swa-sticky (contents + up next) stays in view.
   ============================================================ */

.kb-article h2 { scroll-margin-top: 96px; }

.swa-sticky {
	position: sticky;
	top: 88px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.swa-label {
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--text-3);
}

/* Table of contents with a reading-progress rail (--p is set by kb-reading.js) */
.swa-toc {
	padding: 18px 18px 14px;
	border-radius: 16px;
	background: var(--card);
}

.swa-toc[hidden] { display: none; }

.swa-toc-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

.swa-left { font-size: 0.8rem; font-weight: 700; color: var(--learn); white-space: nowrap; }

.swa-toc-list {
	position: relative;
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
}

.swa-toc-list::before,
.swa-toc-list::after {
	content: '';
	position: absolute;
	left: 6px;
	top: 12px;
	width: 2px;
	border-radius: 1px;
}

.swa-toc-list::before { bottom: 12px; background: var(--card-3); }
.swa-toc-list::after {
	height: calc((100% - 24px) * var(--p, 0));
	background: linear-gradient(#2387ff, #a855f7);
	transition: height 120ms linear;
}

.swa-toc-list li { position: relative; padding: 5px 0 5px 26px; }

/* Each section's dot sits on the rail */
.swa-toc-list li::before {
	content: '';
	position: absolute;
	left: 2px;
	top: 12px;
	z-index: 1;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--card-3);
	box-shadow: 0 0 0 3px var(--card);
	transition: background var(--ease), transform var(--ease);
}

.swa-toc-list li.is-done::before { background: #6b7cff; }
.swa-toc-list li.is-active::before { background: #fff; transform: scale(1.25); }

.swa-toc-link {
	display: block;
	color: var(--text-2);
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.35;
	text-decoration: none;
	transition: color var(--ease);
}

.swa-toc-link:hover { color: var(--text); }
.swa-toc-list li.is-done .swa-toc-link { color: var(--text-3); }
.swa-toc-list li.is-active .swa-toc-link { color: var(--text); font-weight: 800; }

/* Up next */
.swa-next {
	display: block;
	border-radius: 16px;
	overflow: hidden;
	background: var(--card);
	color: var(--text);
	text-decoration: none;
	transition: background var(--ease), transform var(--ease);
}

.swa-next:hover { background: var(--card-2); transform: translateY(-2px); color: var(--text); }
.swa-next .swk-art { aspect-ratio: 5 / 2; }
.swa-next-body { display: flex; flex-direction: column; gap: 4px; padding: 12px 16px 14px; }
.swa-next-title { font-size: 1rem; font-weight: 800; line-height: 1.3; }
.swa-next-time { font-size: 0.8rem; font-weight: 600; color: var(--text-3); }

@media (max-width: 900px) {
	/* One column: the contents would land under the article, so skip it */
	.swa-sticky { position: static; }
	.swa-toc { display: none; }
}


/* ============================================================
   KEEP LEARNING (under articles)
   ============================================================ */

.swa-more {
	margin-top: clamp(48px, 6vw, 80px);
	padding: clamp(28px, 4vw, 40px) 0 clamp(32px, 4vw, 56px);
	border-top: 1px solid var(--line);
}

.swa-more-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 20px;
}

.swa-more-title {
	margin: 6px 0 0;
	font-size: clamp(1.4rem, 2.4vw, 1.9rem);
	font-weight: 900;
	letter-spacing: -0.02em;
	line-height: 1.15;
	color: var(--text);
}

.swa-more-all {
	flex-shrink: 0;
	color: var(--text);
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

.swa-more-all:hover { color: var(--learn); }

.swa-topics {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 28px;
}

.swa-topics .swa-label { margin-right: 6px; }

.swa-topics a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	border-radius: 999px;
	background: var(--card);
	color: var(--text);
	font-size: 0.9rem;
	font-weight: 700;
	text-decoration: none;
	transition: background var(--ease);
}

.swa-topics a::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: hsl(var(--th) 70% 58%); }
.swa-topics a span { color: var(--text-3); font-weight: 600; }
.swa-topics a:hover { background: var(--card-2); color: var(--text); }
.swa-topics a[aria-current] { box-shadow: inset 0 0 0 1px hsl(var(--th) 70% 58%); }

/* Three cards fill the row instead of leaving an empty column */
@media (min-width: 641px) {
	.swa-more-grid { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
}

/* Inline code in articles: Bootstrap's pink (#d63384) is only 4.3:1 on the dark page */
.kb-article code { color: #ff8fc4; }
.kb-article pre code { color: inherit; }