/* Subjects: topic cards, category filter, article reader, cheat sheets (light + dark) */

#section-subjects,
#subj-reader {
	--subj-surface: #ffffff;
	--subj-surface-2: #f1f5f9;
	--subj-border: rgba(15, 23, 42, 0.09);
	--subj-border-hover: rgba(3, 105, 161, 0.35);
	--subj-text: #0f172a;
	--subj-muted: #475569;
	--subj-faint: #64748b;
	--subj-accent: #0369a1;
	--subj-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 8px 24px rgba(15, 23, 42, 0.06);
	--subj-shadow-hover: 0 2px 4px rgba(15, 23, 42, 0.06), 0 18px 40px rgba(15, 23, 42, 0.12);
	--subj-overlay: rgba(15, 23, 42, 0.5);
	--subj-code-bg: #0f172a;
	--subj-code-text: #e2e8f0;
	--cat-process: #0284c7;
	--cat-automation: #059669;
	--cat-oop: #7c3aed;
	--cat-tools: #d97706;
}

body.dark #section-subjects,
body.dark #subj-reader {
	--subj-surface: rgba(30, 41, 59, 0.55);
	--subj-surface-2: rgba(15, 23, 42, 0.6);
	--subj-border: rgba(148, 163, 184, 0.14);
	--subj-border-hover: rgba(100, 181, 246, 0.45);
	--subj-text: #f1f5f9;
	--subj-muted: #cbd5e1;
	--subj-faint: #94a3b8;
	--subj-accent: #64b5f6;
	--subj-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 30px rgba(0, 0, 0, 0.25);
	--subj-shadow-hover: 0 2px 6px rgba(0, 0, 0, 0.35), 0 20px 48px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(100, 181, 246, 0.12);
	--subj-overlay: rgba(2, 6, 23, 0.72);
	--subj-code-bg: rgba(2, 6, 23, 0.75);
	--cat-process: #38bdf8;
	--cat-automation: #34d399;
	--cat-oop: #a78bfa;
	--cat-tools: #fbbf24;
}

#section-subjects .subj-wrap { max-width: 1200px; padding-top: 8px; padding-bottom: 72px; }

/* ---------- Filter chips ---------- */
#section-subjects .subj-filters {
	display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
	margin: 8px 0 28px;
}
#section-subjects .subj-filter {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 8px 14px; border-radius: 999px;
	border: 1px solid var(--subj-border); background: var(--subj-surface);
	color: var(--subj-muted); font: 600 13px/1.2 'Lato', system-ui, sans-serif; letter-spacing: 0.01em;
	cursor: pointer; transition: border-color .2s, color .2s, background .2s;
}
#section-subjects .subj-filter:hover { border-color: var(--subj-border-hover); color: var(--subj-text); }
#section-subjects .subj-filter.is-active {
	background: var(--subj-accent); border-color: var(--subj-accent); color: #fff;
}
body.dark #section-subjects .subj-filter.is-active { color: #0b1220; }
#section-subjects .subj-filter__count {
	min-width: 20px; padding: 2px 6px; border-radius: 999px; font-size: 11px; text-align: center;
	background: var(--subj-surface-2); color: var(--subj-faint);
}
#section-subjects .subj-filter.is-active .subj-filter__count { background: rgba(255, 255, 255, 0.25); color: inherit; }
#section-subjects .subj-filter:focus-visible,
#section-subjects .subj-card__open:focus-visible,
#section-subjects .subj-cheat:focus-visible { outline: 2px solid var(--subj-accent); outline-offset: 2px; }

/* ---------- Card grid ---------- */
#section-subjects .subj-grid {
	display: grid; gap: 18px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 991.98px) { #section-subjects .subj-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { #section-subjects .subj-grid { grid-template-columns: 1fr; gap: 14px; } }

#section-subjects .subj-card {
	--cat: var(--cat-process);
	position: relative; display: flex; flex-direction: column;
	padding: 22px 22px 18px; border-radius: 16px;
	background: var(--subj-surface); border: 1px solid var(--subj-border);
	box-shadow: var(--subj-shadow);
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
#section-subjects .subj-card[data-subj-cat="automation"] { --cat: var(--cat-automation); }
#section-subjects .subj-card[data-subj-cat="oop"] { --cat: var(--cat-oop); }
#section-subjects .subj-card[data-subj-cat="tools"] { --cat: var(--cat-tools); }
#section-subjects .subj-card::before {
	content: ''; position: absolute; left: 22px; right: 22px; top: 0; height: 2px; border-radius: 0 0 2px 2px;
	background: var(--cat); opacity: 0.85;
}
#section-subjects .subj-card:hover { transform: translateY(-3px); box-shadow: var(--subj-shadow-hover); border-color: var(--subj-border-hover); }
#section-subjects .subj-card[hidden] { display: none; }

#section-subjects .subj-card__top { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
#section-subjects .subj-card__icon,
#subj-reader .subj-reader__icon {
	display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
	width: 38px; height: 38px; border-radius: 10px;
	color: var(--cat); background: color-mix(in srgb, var(--cat) 14%, transparent);
	border: 1px solid color-mix(in srgb, var(--cat) 28%, transparent);
}
#section-subjects .subj-card__svg,
#subj-reader .subj-reader__icon svg { width: 20px; height: 20px; }
#section-subjects .subj-card__cat {
	font: 700 11px/1 'Lato', system-ui, sans-serif; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cat);
}
#section-subjects .subj-card__title {
	margin: 0 0 8px; color: var(--subj-text);
	font: 700 19px/1.3 'Lato', system-ui, sans-serif; letter-spacing: -0.005em; text-transform: none;
}
#section-subjects .subj-card__summary {
	margin: 0 0 18px; color: var(--subj-muted); font-size: 14.5px; line-height: 1.6;
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
#section-subjects .subj-card__open {
	margin-top: auto; align-self: flex-start;
	display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none;
	color: var(--subj-accent); font: 700 14px/1.4 'Lato', system-ui, sans-serif; cursor: pointer;
}
/* Whole card is clickable through the button */
#section-subjects .subj-card__open::after { content: ''; position: absolute; inset: 0; border-radius: 16px; }
#section-subjects .subj-card__open svg { width: 16px; height: 16px; transition: transform .2s ease; }
#section-subjects .subj-card:hover .subj-card__open svg { transform: translateX(3px); }

/* ---------- Cheat sheets ---------- */
#section-subjects .subj-cheats { margin-top: 56px; }
#section-subjects .subj-cheats__head { text-align: center; margin-bottom: 20px; }
#section-subjects .subj-cheats__title {
	margin: 0 0 6px; color: var(--subj-text);
	font: 700 24px/1.25 'Lato', system-ui, sans-serif; text-transform: none; letter-spacing: 0;
}
#section-subjects .subj-cheats__sub { margin: 0; color: var(--subj-faint); font-size: 15px; }
#section-subjects .subj-cheats__grid { display: grid; gap: 14px; grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1199.98px) { #section-subjects .subj-cheats__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767.98px) { #section-subjects .subj-cheats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 479.98px) { #section-subjects .subj-cheats__grid { grid-template-columns: 1fr; } }
#section-subjects .subj-cheat {
	--cat: var(--cat-process);
	position: relative; display: flex; flex-direction: column; gap: 4px;
	padding: 16px 18px; border-radius: 14px; text-decoration: none !important;
	background: var(--subj-surface); border: 1px solid var(--subj-border); box-shadow: var(--subj-shadow);
	transition: border-color .2s, transform .2s, box-shadow .2s;
}
#section-subjects .subj-cheat[data-subj-cat="automation"] { --cat: var(--cat-automation); }
#section-subjects .subj-cheat[data-subj-cat="oop"] { --cat: var(--cat-oop); }
#section-subjects .subj-cheat[data-subj-cat="tools"] { --cat: var(--cat-tools); }
#section-subjects .subj-cheat:hover { border-color: var(--subj-border-hover); transform: translateY(-2px); box-shadow: var(--subj-shadow-hover); }
#section-subjects .subj-cheat__tag {
	align-self: flex-start; margin-bottom: 6px; padding: 3px 8px; border-radius: 6px;
	font: 700 10.5px/1.3 'Lato', system-ui, sans-serif; letter-spacing: 0.06em; text-transform: uppercase;
	color: var(--cat); background: color-mix(in srgb, var(--cat) 12%, transparent);
}
#section-subjects .subj-cheat__name { color: var(--subj-text); font: 700 15px/1.3 'Lato', system-ui, sans-serif; padding-right: 22px; }
#section-subjects .subj-cheat__desc { color: var(--subj-muted); font-size: 13px; line-height: 1.5; flex: 1 1 auto; }
#section-subjects .subj-cheat__src { margin-top: 6px; color: var(--subj-faint); font-size: 12px; }
#section-subjects .subj-cheat__ext {
	position: absolute; right: 14px; top: 16px;
	width: 18px; height: 18px; color: var(--subj-accent);
}
#section-subjects .subj-cheat__ext svg { width: 100%; height: 100%; }

/* ---------- Article reader ---------- */
#subj-reader {
	position: fixed; inset: 0; z-index: 1000000;
	display: flex; align-items: center; justify-content: center;
	padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
}
#subj-reader[hidden] { display: none; }
#subj-reader .subj-reader__backdrop {
	position: absolute; inset: 0; background: var(--subj-overlay);
	backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
	animation: subjFade .2s ease;
}
#subj-reader .subj-reader__dialog {
	--cat: var(--cat-process);
	position: relative; display: flex; flex-direction: column;
	width: min(760px, 100%); max-height: min(86vh, 900px);
	border-radius: 18px; overflow: hidden; outline: none;
	background: var(--subj-surface-solid, #ffffff); border: 1px solid var(--subj-border);
	box-shadow: 0 30px 80px rgba(2, 6, 23, 0.35);
	animation: subjIn .22s ease;
}
body.dark #subj-reader .subj-reader__dialog { background: #111a2c; }
#subj-reader[data-cat="automation"] .subj-reader__dialog { --cat: var(--cat-automation); }
#subj-reader[data-cat="oop"] .subj-reader__dialog { --cat: var(--cat-oop); }
#subj-reader[data-cat="tools"] .subj-reader__dialog { --cat: var(--cat-tools); }

#subj-reader .subj-reader__head {
	display: flex; align-items: center; gap: 14px;
	padding: 18px 20px; border-bottom: 1px solid var(--subj-border);
}
#subj-reader .subj-reader__heading { flex: 1 1 auto; min-width: 0; }
#subj-reader .subj-reader__cat {
	display: block; margin-bottom: 3px; color: var(--cat);
	font: 700 11px/1 'Lato', system-ui, sans-serif; letter-spacing: 0.08em; text-transform: uppercase;
}
#subj-reader .subj-reader__title {
	margin: 0; color: var(--subj-text); font: 700 21px/1.25 'Lato', system-ui, sans-serif; text-transform: none; letter-spacing: 0;
}
#subj-reader .subj-reader__close {
	flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
	width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--subj-border);
	background: transparent; color: var(--subj-muted); cursor: pointer; transition: background .2s, color .2s;
}
#subj-reader .subj-reader__close:hover { background: var(--subj-surface-2); color: var(--subj-text); }
#subj-reader .subj-reader__close svg { width: 18px; height: 18px; }

#subj-reader .subj-reader__body {
	overflow-y: auto; overscroll-behavior: contain;
	padding: 22px 26px 26px; color: var(--subj-muted);
	font-size: 15.5px; line-height: 1.75; overflow-wrap: anywhere;
}
#subj-reader .subj-reader__body p { margin: 0 0 14px; color: inherit; font-size: inherit; line-height: inherit; }
#subj-reader .subj-reader__lead {
	padding: 14px 16px; margin-bottom: 18px !important; border-radius: 12px;
	background: color-mix(in srgb, var(--cat) 9%, transparent);
	border-left: 3px solid var(--cat); color: var(--subj-text) !important; font-weight: 600;
}
#subj-reader .subj-reader__text { margin-top: 6px; }
#subj-reader .subj-reader__body strong { color: var(--subj-text); }
#subj-reader .subj-reader__body pre,
#subj-reader .subj-reader__body .pw-article-code {
	margin: 12px 0 16px; padding: 14px 16px; border-radius: 10px; overflow-x: auto;
	background: var(--subj-code-bg); color: var(--subj-code-text);
	font: 13px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre;
}
#subj-reader .subj-reader__body code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.92em; }
#subj-reader .subj-reader__body pre code { color: inherit; background: none; padding: 0; }

#subj-reader .subj-reader__foot {
	display: flex; align-items: center; gap: 12px;
	padding: 12px 16px; border-top: 1px solid var(--subj-border); background: var(--subj-surface-2);
}
#subj-reader .subj-reader__pos { flex: 1 1 auto; text-align: center; color: var(--subj-faint); font-size: 12.5px; }
#subj-reader .subj-reader__nav {
	display: inline-flex; align-items: center; gap: 6px; max-width: 42%;
	padding: 8px 12px; border-radius: 10px; border: 1px solid var(--subj-border);
	background: transparent; color: var(--subj-text); font: 600 13.5px/1.2 'Lato', system-ui, sans-serif; cursor: pointer;
	transition: border-color .2s, background .2s;
}
#subj-reader .subj-reader__nav:hover { border-color: var(--subj-border-hover); background: var(--subj-surface); }
#subj-reader .subj-reader__nav svg { width: 16px; height: 16px; flex: 0 0 auto; }
#subj-reader .subj-reader__navLabel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#subj-reader .subj-reader__close:focus-visible,
#subj-reader .subj-reader__nav:focus-visible { outline: 2px solid var(--subj-accent); outline-offset: 2px; }

@media (max-width: 575.98px) {
	#subj-reader { padding: 0; align-items: flex-end; }
	#subj-reader .subj-reader__dialog { width: 100%; max-height: 92vh; border-radius: 18px 18px 0 0; }
	#subj-reader .subj-reader__body { padding: 18px 18px 22px; font-size: 15px; }
	#subj-reader .subj-reader__navLabel { display: none; }
}

@keyframes subjFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes subjIn { from { opacity: 0; transform: translateY(12px) scale(0.985); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
	#section-subjects .subj-card, #section-subjects .subj-cheat,
	#subj-reader .subj-reader__backdrop, #subj-reader .subj-reader__dialog { transition: none; animation: none; }
}
html.subj-reader-open { overflow: hidden; }