/* Studio Toolbox Docs — two-column docs layout inside the GeneratePress content area.
   Colours pull from the theme.json preset tokens so docs match the storefront. */

:root {
	--msdocs-primary: var(--wp--preset--color--primary, #4F46E5);
	--msdocs-ink: var(--wp--preset--color--ink, #111827);
	--msdocs-secondary: var(--wp--preset--color--text-secondary, #6B7280);
	--msdocs-muted: var(--wp--preset--color--text-muted, #9CA3AF);
	--msdocs-border: var(--wp--preset--color--border, #E5E7EB);
	--msdocs-surface: var(--wp--preset--color--surface, #FFFFFF);
	--msdocs-bg: var(--wp--preset--color--background, #F8FAFC);
	--msdocs-highlight: var(--wp--preset--color--highlight, #F59E0B);
}

.msdocs {
	display: grid;
	grid-template-columns: 250px minmax(0, 1fr);
	gap: 48px;
	align-items: start;
}

/* ---------------------------------------------------------------- sidebar */

.msdocs-nav {
	position: sticky;
	top: 24px;
	font-size: 0.9rem;
	border-right: 1px solid var(--msdocs-border);
	padding-right: 20px;
}

.msdocs-nav-head { margin-bottom: 20px; }

.msdocs-nav-back {
	display: inline-block;
	font-size: 0.8rem;
	color: var(--msdocs-secondary);
	text-decoration: none;
	margin-bottom: 10px;
}
.msdocs-nav-back:hover { color: var(--msdocs-primary); }

.msdocs-nav-title {
	display: block;
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--msdocs-ink);
	text-decoration: none;
	line-height: 1.25;
}
.msdocs-nav-title:hover { color: var(--msdocs-primary); }

.msdocs-nav-ver {
	margin-top: 4px;
	font-size: 0.75rem;
	color: var(--msdocs-muted);
}

.msdocs-nav-group { margin-bottom: 18px; }

.msdocs-nav-group-label {
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 0.7rem;
	font-weight: 700;
	color: var(--msdocs-muted);
	margin-bottom: 6px;
}

.msdocs-nav-tree ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.msdocs-nav-tree li { margin: 0; }

.msdocs-nav-tree a {
	display: block;
	padding: 4px 10px;
	margin: 1px 0;
	border-radius: 6px;
	color: var(--msdocs-secondary);
	text-decoration: none;
	line-height: 1.35;
}
.msdocs-nav-tree a:hover {
	background: var(--msdocs-bg);
	color: var(--msdocs-ink);
}
.msdocs-nav-tree a.is-active {
	background: color-mix(in srgb, var(--msdocs-primary) 12%, transparent);
	color: var(--msdocs-primary);
	font-weight: 600;
}

.msdocs-stub-dot { color: var(--msdocs-highlight); }

.msdocs-nav-foot {
	margin-top: 20px;
	padding-top: 14px;
	border-top: 1px solid var(--msdocs-border);
}
.msdocs-nav-foot a {
	color: var(--msdocs-secondary);
	text-decoration: none;
	font-size: 0.85rem;
}
.msdocs-nav-foot a:hover { color: var(--msdocs-primary); }

/* ---------------------------------------------------------------- content */

.msdocs-main { min-width: 0; }

.msdocs-article,
.msdocs-lead { max-width: 760px; }

.msdocs-article h1,
.msdocs-lead h1 { margin-top: 0; }

.msdocs-article h2 {
	margin-top: 2em;
	padding-bottom: 0.2em;
	border-bottom: 1px solid var(--msdocs-border);
}
.msdocs-article h3 { margin-top: 1.6em; }

.msdocs-article p,
.msdocs-article li { line-height: 1.7; }

.msdocs-article a { color: var(--msdocs-primary); }

.msdocs-article code {
	background: var(--msdocs-bg);
	border: 1px solid var(--msdocs-border);
	border-radius: 4px;
	padding: 0.1em 0.35em;
	font-size: 0.88em;
}
.msdocs-article pre {
	background: var(--msdocs-ink);
	color: #f3f4f6;
	padding: 16px 18px;
	border-radius: 8px;
	overflow-x: auto;
}
.msdocs-article pre code {
	background: none;
	border: 0;
	padding: 0;
	color: inherit;
}

.msdocs-article table {
	width: 100%;
	border-collapse: collapse;
	margin: 1.2em 0;
	font-size: 0.95em;
	display: block;
	overflow-x: auto;
}
.msdocs-article th,
.msdocs-article td {
	border: 1px solid var(--msdocs-border);
	padding: 8px 12px;
	text-align: left;
	vertical-align: top;
}
.msdocs-article th { background: var(--msdocs-bg); }

.msdocs-article blockquote {
	margin: 1.2em 0;
	padding: 2px 18px;
	border-left: 3px solid var(--msdocs-border);
	color: var(--msdocs-secondary);
}

/* ---------------------------------------------------------------- markers */

/* Stub → "article in progress" callout */
.msdocs-callout {
	margin: 1.4em 0;
	padding: 14px 18px;
	border-radius: 8px;
	border: 1px solid color-mix(in srgb, var(--msdocs-highlight) 40%, var(--msdocs-border));
	background: color-mix(in srgb, var(--msdocs-highlight) 8%, transparent);
}
.msdocs-callout p { margin: 0.3em 0; }
.msdocs-callout-label {
	font-weight: 700;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: color-mix(in srgb, var(--msdocs-highlight) 70%, var(--msdocs-ink));
}

/* Pro badge */
.msdocs-badge {
	display: inline-block;
	background: var(--msdocs-primary);
	color: #fff;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	padding: 2px 7px;
	border-radius: 4px;
	vertical-align: middle;
}
.msdocs-pro-badge {
	color: var(--msdocs-secondary);
	font-size: 0.9rem;
}

/* Screenshot placeholder */
.msdocs-shot {
	margin: 1.4em 0;
	padding: 28px 18px;
	border: 2px dashed var(--msdocs-border);
	border-radius: 8px;
	text-align: center;
	background: var(--msdocs-bg);
}
.msdocs-shot::before {
	content: "📷";
	display: block;
	font-size: 1.6rem;
	margin-bottom: 6px;
	opacity: 0.7;
}
.msdocs-shot figcaption {
	color: var(--msdocs-muted);
	font-size: 0.85rem;
	font-style: italic;
}

/* ---------------------------------------------------------------- landing */

.msdocs-lead { margin-bottom: 8px; }
.msdocs-ver { color: var(--msdocs-muted); font-size: 0.85rem; margin-top: -0.4em; }
.msdocs-lead-sub { color: var(--msdocs-secondary); font-size: 1.05rem; }

/* "Start here" entry point (landing main area — the full tree is the sidebar) */
.msdocs-starthere { margin-top: 2em; }
.msdocs-starthere h2 {
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--msdocs-muted);
	margin: 0 0 0.8em;
}
.msdocs-starthere-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 14px;
}
.msdocs-starthere-card {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	border: 1px solid var(--msdocs-border);
	border-radius: 10px;
	background: var(--msdocs-surface);
	padding: 16px 18px;
	text-decoration: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.msdocs-starthere-card:hover {
	border-color: var(--msdocs-primary);
	box-shadow: 0 2px 12px rgba(17, 24, 39, .06);
}
.msdocs-starthere-title { font-weight: 600; color: var(--msdocs-primary); }

.msdocs-stub-tag {
	display: inline-block;
	font-size: 0.7rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: color-mix(in srgb, var(--msdocs-highlight) 70%, var(--msdocs-ink));
	background: color-mix(in srgb, var(--msdocs-highlight) 14%, transparent);
	padding: 1px 6px;
	border-radius: 4px;
	margin-left: 6px;
	vertical-align: middle;
}

/* ---------------------------------------------------------------- responsive */

@media (max-width: 768px) {
	.msdocs {
		grid-template-columns: 1fr;
		gap: 24px;
	}
	.msdocs-nav {
		position: static;
		border-right: 0;
		border-bottom: 1px solid var(--msdocs-border);
		padding-right: 0;
		padding-bottom: 16px;
	}
}