/* Skills directory.
   Matches the AI hub (.mfai) it sits under: near-black ground, glass surfaces,
   royal and sky accents, DM Sans headings, Inter body, JetBrains Mono for
   anything you would type.

   Every rule is scoped to .mfsk and carries its own token block, for the same
   reason the hub does it: the Elementor header and footer render on this page
   too, so a bare element selector would restyle them. Element resets are
   wrapped in :where() so they add no specificity and a plain .mfsk-* class
   always wins.

   The brand layer's remap.css repaints the colours of templates it knows by
   name. It does not know this one, so the tokens below are the whole theme —
   deliberately the same values the hub uses, written out rather than
   referenced, because the hub's variables are scoped to .mfai. */

.mfsk {
	--bg: #070A12;
	--surface: #0E1222;
	--surface-2: #141A2E;
	--glass: rgba(255, 255, 255, .035);
	--glass-2: rgba(255, 255, 255, .06);
	--line: rgba(255, 255, 255, .10);
	--line-2: rgba(255, 255, 255, .16);
	--text: #F8FAFF;
	--text-2: rgba(248, 250, 255, .66);
	--text-3: rgba(248, 250, 255, .5);
	--royal: #4F46FF;
	--royal-hi: #635BFF;
	--sky: #3B82F6;
	--accent: #93B4FB;
	--lav: #E9D8FF;
	--good: #4ADE80;
	--warn: #FBBF6A;
	--bad: #FB7185;
	--font-display: 'DM Sans', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	display: block;
	background: var(--bg);
	color: var(--text);
	font: 400 16px/1.6 var(--font-body);
	-webkit-font-smoothing: antialiased;
}

.mfsk *, .mfsk *::before, .mfsk *::after { box-sizing: border-box; }
.mfsk :where(a) { color: inherit; text-decoration: none; }
.mfsk :where(button) { font: inherit; color: inherit; cursor: pointer; }
.mfsk :where(input, select) { font: inherit; color: inherit; }
.mfsk :where(h2, h3) { font-family: var(--font-display); margin: 0; text-wrap: balance; }
.mfsk :where(p) { margin: 0; }
.mfsk :where(ul, ol) { margin: 0; padding: 0; list-style: none; }
.mfsk [hidden] { display: none !important; }
.mfsk :focus-visible { outline: 2px solid var(--sky); outline-offset: 3px; border-radius: 6px; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Header: the ledger strip only. The page supplies the heading and intro. */

/* The counts, as a ledger strip. */
.mfsk-ledger {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 22px 0 0;
}
.mfsk-ledger li {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 11px 17px;
	border: 1px solid var(--line);
	border-radius: 14px;
	background: var(--glass);
	min-width: 134px;
}
.mfsk-led-n {
	font: 600 1.25rem/1.1 var(--font-display);
	font-variant-numeric: tabular-nums;
	color: var(--text);
}
.mfsk-led-l {
	font: 500 10.5px/1.3 var(--font-mono);
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--text-3);
}
.mfsk-stamp { margin-top: 12px; font-size: .84rem; color: var(--text-3); }

/* Controls ----------------------------------------------------------- */
.mfsk-controls {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	margin: 26px 0 0;
	padding: 12px;
	border: 1px solid var(--line);
	border-radius: 16px;
	background: var(--surface);
}
.mfsk-search { flex: 1 1 280px; display: block; }
.mfsk-search input {
	width: 100%;
	padding: 11px 14px;
	border: 1px solid var(--line-2);
	border-radius: 100px;
	background: var(--glass);
	color: var(--text);
	font-size: .93rem;
}
.mfsk-search input::placeholder { color: var(--text-3); }
.mfsk-search input:focus { border-color: var(--sky); background: var(--glass-2); }
.mfsk-select { display: block; }
.mfsk-controls select {
	padding: 10px 14px;
	border: 1px solid var(--line-2);
	border-radius: 100px;
	background: var(--glass);
	color: var(--text);
	font-size: .87rem;
	max-width: 16rem;
}
.mfsk-controls select:focus { border-color: var(--sky); }
/* Native dropdown lists ignore the control's background, so set it here or
   the options render as dark text on a dark panel in some browsers. */
.mfsk-controls option { background: var(--surface-2); color: var(--text); }

.mfsk-count {
	margin: 18px 0 12px;
	font: 500 11.5px/1 var(--font-mono);
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--text-3);
}

/* The list ----------------------------------------------------------- */
.mfsk-list { display: flex; flex-direction: column; gap: 10px; }
.mfsk-item {
	display: grid;
	grid-template-columns: 2.9rem 1fr;
	gap: 14px;
	align-items: start;
	padding: 16px 18px;
	border: 1px solid var(--line);
	border-radius: 16px;
	background: var(--glass);
	transition: background .15s, border-color .15s;
}
.mfsk-item:hover { background: var(--glass-2); border-color: var(--line-2); }
.mfsk-rank {
	font: 600 1.05rem/1.45 var(--font-display);
	font-variant-numeric: tabular-nums;
	color: var(--text-3);
	text-align: right;
}
.mfsk-main { min-width: 0; }
.mfsk-name {
	margin: 0 0 4px;
	font-size: 1.06rem;
	line-height: 1.35;
	letter-spacing: -.01em;
	color: var(--text);
	overflow-wrap: anywhere;
}
.mfsk-owner {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: .85rem;
	color: var(--text-3);
	margin-left: .45rem;
}
.mfsk-summary {
	margin: 0 0 8px;
	max-width: 72ch;
	font-size: .91rem;
	line-height: 1.6;
	color: var(--text-2);
	text-wrap: pretty;
}

/* Facts -------------------------------------------------------------- */
.mfsk-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	margin: 0 0 10px;
	font-size: .84rem;
	color: var(--text-3);
}
.mfsk-stat strong {
	color: var(--text);
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}
.mfsk-stat:nth-of-type(2) strong { color: var(--lav); }
.mfsk-tag {
	padding: 4px 10px;
	border: 1px solid rgba(147, 180, 251, .3);
	border-radius: 100px;
	background: rgba(79, 70, 255, .1);
	font: 500 10.5px/1.3 var(--font-mono);
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--accent);
}
.mfsk-reviewed {
	padding: 4px 10px;
	border: 1px solid rgba(74, 222, 128, .32);
	border-radius: 100px;
	background: rgba(74, 222, 128, .1);
	font: 500 10.5px/1.3 var(--font-mono);
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--good);
}
.mfsk-audit {
	padding: 4px 10px;
	border-radius: 100px;
	border: 1px solid var(--line-2);
	font: 500 10.5px/1.3 var(--font-mono);
	letter-spacing: .09em;
	text-transform: uppercase;
}
.mfsk-audit-pass { color: var(--text-2); }
.mfsk-audit-warn { color: var(--warn); border-color: rgba(251, 146, 60, .3); background: rgba(245, 158, 11, .08); }
.mfsk-audit-fail { color: var(--bad); border-color: rgba(251, 113, 133, .32); background: rgba(251, 113, 133, .08); }

/* Commands ----------------------------------------------------------- */
.mfsk-cmd {
	display: flex;
	gap: 8px;
	align-items: center;
	margin: 0 0 10px;
	padding: 9px 10px 9px 13px;
	border: 1px solid var(--line);
	border-radius: 12px;
	background: var(--bg);
	overflow: hidden;
}
.mfsk-cmd code {
	flex: 1 1 auto;
	font: 400 .79rem/1.5 var(--font-mono);
	color: var(--accent);
	background: none;
	padding: 0;
	overflow-x: auto;
	white-space: nowrap;
}
.mfsk-copy {
	flex: 0 0 auto;
	padding: 6px 13px;
	border: 1px solid var(--line-2);
	border-radius: 100px;
	background: transparent;
	color: var(--text-2);
	font: 600 11.5px/1 var(--font-display);
	transition: background .15s, color .15s, border-color .15s;
}
.mfsk-copy:hover { background: var(--royal); border-color: var(--royal); color: #fff; }

.mfsk-links { display: flex; flex-wrap: wrap; gap: 14px; font-size: .83rem; }
.mfsk-links a { color: var(--accent); border-bottom: 1px solid rgba(147, 180, 251, .28); }
.mfsk-links a:hover { color: var(--text); border-bottom-color: var(--text); }

/* Install guide ------------------------------------------------------ */
.mfsk-guide { margin: 0 0 10px; }
.mfsk-guide-toggle {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 14px 6px 12px;
	border: 1px solid var(--line-2);
	border-radius: 100px;
	background: transparent;
	font: 600 12.5px/1 var(--font-display);
	color: var(--text-2);
	transition: background .15s, color .15s, border-color .15s;
}
.mfsk-guide-toggle:hover,
.mfsk-guide.is-open .mfsk-guide-toggle {
	background: rgba(79, 70, 255, .12);
	border-color: rgba(147, 180, 251, .35);
	color: var(--text);
}
.mfsk-guide-caret {
	width: 0; height: 0;
	border-left: 5px solid currentColor;
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
	transition: transform .16s ease;
}
.mfsk-guide.is-open .mfsk-guide-caret { transform: rotate(90deg); }

.mfsk-guide-body {
	margin-top: 10px;
	padding: 16px 18px;
	border: 1px solid var(--line);
	border-left: 2px solid var(--royal);
	border-radius: 14px;
	background: var(--surface);
}
.mfsk-guide-what {
	margin: 0 0 12px;
	max-width: 74ch;
	font-size: .9rem;
	line-height: 1.62;
	color: var(--text-2);
	text-wrap: pretty;
}
.mfsk-guide-h {
	margin: 16px 0 7px;
	font: 500 10.5px/1 var(--font-mono);
	letter-spacing: .11em;
	text-transform: uppercase;
	color: var(--text-3);
}
.mfsk-guide-h:first-child { margin-top: 0; }
.mfsk-guide-p { margin: 0; max-width: 74ch; font-size: .88rem; line-height: 1.6; color: var(--text-2); }

.mfsk-guide-req { display: flex; flex-direction: column; gap: 5px; }
.mfsk-guide-req li {
	position: relative;
	padding-left: 18px;
	font-size: .87rem;
	line-height: 1.55;
	color: var(--text-2);
}
.mfsk-guide-req li::before {
	content: '';
	position: absolute;
	left: 3px; top: .62em;
	width: 5px; height: 5px;
	border-radius: 50%;
	background: var(--accent);
}

/* Steps are numbered by CSS so the markup stays a plain list and the digits
   line up regardless of how the theme styles ordered lists. */
.mfsk-guide-steps { counter-reset: mfsk-step; display: flex; flex-direction: column; gap: 12px; }
.mfsk-guide-steps > li {
	counter-increment: mfsk-step;
	position: relative;
	padding-left: 30px;
}
.mfsk-guide-steps > li::before {
	content: counter(mfsk-step);
	position: absolute;
	left: 0; top: 0;
	width: 21px; height: 21px;
	display: grid;
	place-items: center;
	border: 1px solid rgba(147, 180, 251, .3);
	border-radius: 50%;
	background: rgba(79, 70, 255, .12);
	font: 600 11px/1 var(--font-mono);
	color: var(--accent);
}
.mfsk-step-label {
	display: block;
	font-size: .89rem;
	line-height: 1.5;
	color: var(--text);
}
.mfsk-step-note {
	display: block;
	margin-top: 3px;
	font-size: .82rem;
	line-height: 1.5;
	color: var(--text-3);
}
.mfsk-cmd-sm { margin: 7px 0 0; padding: 7px 8px 7px 11px; border-radius: 10px; }
.mfsk-cmd-sm code { font-size: .76rem; }

.mfsk-guide-caution {
	margin: 16px 0 0;
	padding: 10px 13px;
	border: 1px solid rgba(251, 146, 60, .28);
	border-left: 2px solid var(--warn);
	border-radius: 10px;
	background: rgba(245, 158, 11, .07);
	font-size: .84rem;
	line-height: 1.55;
	color: #FFD9A8;
}

/* Footer ------------------------------------------------------------- */
.mfsk-more-wrap { text-align: center; margin: 22px 0 8px; }
.mfsk-more {
	padding: 12px 28px;
	border: 1px solid var(--line-2);
	border-radius: 100px;
	background: transparent;
	color: var(--text);
	font: 600 14.5px/1 var(--font-display);
	transition: background .15s, border-color .15s;
}
.mfsk-more:hover { background: var(--glass-2); border-color: var(--accent); }
.mfsk-more[disabled] { opacity: .55; cursor: default; }
.mfsk-empty { color: var(--text-3); font-size: .92rem; }
.mfsk-foot {
	margin-top: 26px;
	padding-top: 18px;
	border-top: 1px solid var(--line);
	max-width: 74ch;
	font-size: .83rem;
	line-height: 1.62;
	color: var(--text-3);
}

@media (max-width: 680px) {
	.mfsk-item { grid-template-columns: 1.8rem 1fr; gap: 10px; padding: 14px; }
	.mfsk-controls select { max-width: 100%; flex: 1 1 140px; }
	.mfsk-owner { display: block; margin-left: 0; margin-top: 2px; }
	.mfsk-ledger li { flex: 1 1 128px; min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.mfsk-guide-caret, .mfsk-item, .mfsk-copy, .mfsk-more, .mfsk-guide-toggle { transition: none; }
}

/* Questions ---------------------------------------------------------- */
.mfsk-faq { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--line); }
.mfsk-faq-h {
	margin: 0 0 14px;
	font-size: clamp(1.15rem, 1rem + .6vw, 1.45rem);
	line-height: 1.25;
	letter-spacing: -.01em;
	color: var(--text);
}
.mfsk-faq-item {
	border: 1px solid var(--line);
	border-radius: 14px;
	background: var(--glass);
	margin-bottom: 8px;
}
.mfsk-faq-item > summary {
	cursor: pointer;
	list-style: none;
	padding: 13px 44px 13px 16px;
	position: relative;
	font: 600 .95rem/1.45 var(--font-display);
	color: var(--text);
}
.mfsk-faq-item > summary::-webkit-details-marker { display: none; }
.mfsk-faq-item > summary::after {
	content: '';
	position: absolute;
	right: 18px; top: 50%;
	width: 8px; height: 8px;
	margin-top: -5px;
	border-right: 2px solid var(--accent);
	border-bottom: 2px solid var(--accent);
	transform: rotate(45deg);
	transition: transform .16s ease;
}
.mfsk-faq-item[open] > summary::after { transform: rotate(-135deg); margin-top: -2px; }
.mfsk-faq-item > summary:hover { color: var(--accent); }
.mfsk-faq-item > p {
	margin: 0;
	padding: 0 16px 15px;
	max-width: 76ch;
	font-size: .9rem;
	line-height: 1.62;
	color: var(--text-2);
	text-wrap: pretty;
}
.mfsk-foot a { color: var(--accent); border-bottom: 1px solid rgba(147, 180, 251, .28); }
.mfsk-foot a:hover { color: var(--text); border-bottom-color: var(--text); }

@media (prefers-reduced-motion: reduce) {
	.mfsk-faq-item > summary::after { transition: none; }
}