/* /install guide (template-install.php). Command and secret boxes reuse
   agent-install.css (.agent-install-code, -value, -btn, -reveal, -os-btn);
   the rules below adapt them to a light, document-style page.

   Layout: a sticky rail (OS switch + "On this page") beside one main column.
   Everything in the main column spans its full width, so every block shares
   one left edge. */

.agent-install-page { padding: var(--space-xl) 0 var(--space-2xl); }

.ig-wrap {
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr);
	gap: 56px;
	align-items: start;
	max-width: 1160px;
}
.ig-main { max-width: 760px; min-width: 0; }
.ig-main p { max-width: none; }

/* ---- Rail ---- */
.ig-rail {
	position: sticky;
	top: 96px;
	display: flex;
	flex-direction: column;
	gap: var(--space-lg);
	max-height: calc(100vh - 120px);
	overflow-y: auto;
	padding-bottom: var(--space-md);
}
.ig-rail-label {
	display: block;
	margin-bottom: var(--space-sm);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink-soft);
}

.ig-seg {
	display: flex;
	padding: 3px;
	background: var(--navy-100);
	border: 1px solid var(--border);
	border-radius: 10px;
}
.ig-os-switch .agent-install-os-btn {
	flex: 1;
	padding: 7px 8px;
	font-size: 13px;
	color: var(--ink-soft);
	border-radius: 7px;
	white-space: nowrap;
}
.ig-os-switch .agent-install-os-btn:hover { color: var(--ink); }
.ig-os-switch .agent-install-os-btn[aria-pressed="true"] {
	color: var(--white);
	background: var(--navy-900);
	box-shadow: var(--shadow-sm);
}
.ig-os-switch .agent-install-os-btn:focus-visible { outline-color: var(--navy-900); }

.ig-nav { display: flex; flex-direction: column; border-left: 1px solid var(--border); }
.ig-nav .ig-rail-label { padding-left: 14px; }
.ig-nav a {
	margin-left: -1px;
	padding: 5px 0 5px 14px;
	border-left: 2px solid transparent;
	font-size: 14px;
	line-height: 1.4;
	color: var(--ink-soft);
	text-decoration: none;
}
.ig-nav a.ig-nav-sub { padding-left: 26px; font-size: 13px; }
.ig-nav a:hover { color: var(--ink); }
.ig-nav a.is-current { color: var(--ink); font-weight: 600; border-left-color: var(--teal-500); }
.ig-nav a.ig-nav-sub.is-current { font-weight: 500; }

/* ---- Hero ---- */
.ig-hero { padding-bottom: var(--space-xl); }
.ig-hero .eyebrow { margin: 0 0 var(--space-md); }
.ig-hero h1 { margin: 0 0 var(--space-md); font-size: 40px; line-height: 1.15; letter-spacing: -0.01em; }
.ig-lede { margin: 0; font-size: 18px; line-height: 1.6; color: var(--ink-soft); }

.ig-facts {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	margin: var(--space-lg) 0 0;
	padding: 0;
	list-style: none;
	font-size: 14px;
	font-weight: 500;
	color: var(--ink);
}
.ig-facts li { position: relative; padding-left: 22px; }
.ig-facts li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 3px;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--teal-100);
	box-shadow: inset 0 0 0 4px var(--teal-100), inset 0 0 0 14px var(--teal-500);
}

.ig-routes {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin: var(--space-lg) 0 0;
	padding: 0;
	list-style: none;
}
.ig-routes a {
	display: flex;
	flex-direction: column;
	gap: 4px;
	height: 100%;
	padding: 16px 18px;
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: 14px;
	color: var(--ink);
	text-decoration: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ig-routes a:hover { border-color: var(--navy-300); box-shadow: var(--shadow-sm); }
.ig-routes strong { font-size: 15px; }
.ig-routes strong::after { content: " \2193"; color: var(--ink-soft); font-weight: 400; }
.ig-routes span { font-size: 13px; line-height: 1.5; color: var(--ink-soft); }

/* ---- Sections ---- */
.ig-section {
	padding-top: 56px;
	margin-top: 56px;
	border-top: 1px solid var(--border);
	scroll-margin-top: 40px; /* the section's own top padding clears the header */
}
.ig-hero + .ig-section { margin-top: var(--space-md); }
.ig-section > h2 { margin: 0 0 var(--space-sm); font-size: 28px; line-height: 1.25; }
.ig-section > h2 + p { color: var(--ink-soft); }
.ig-section h3 { margin: var(--space-xl) 0 var(--space-sm); font-size: 19px; line-height: 1.3; }
.ig-section h4 { margin: var(--space-lg) 0 var(--space-xs); font-size: 15px; line-height: 1.4; }
.ig-section p, .ig-section li { font-size: 16px; line-height: 1.65; }
.ig-section p { margin: 0 0 var(--space-md); }
.ig-section :not(pre) > code:not(.agent-install-value) {
	font-family: var(--font-mono);
	font-size: 0.86em;
	background: var(--navy-100);
	border-radius: 5px;
	padding: 1px 5px;
	overflow-wrap: anywhere;
}
.ig-section p.ig-small, .ig-small { font-size: 14px; color: var(--ink-soft); }
.ig-kicker {
	margin: 0 0 var(--space-md) !important;
	font-size: 14px !important;
	color: var(--ink-soft);
}

/* Cards: one per agent. */
.ig-card {
	margin-top: var(--space-md);
	padding: var(--space-lg);
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: 16px;
	scroll-margin-top: 96px;
}
.ig-section > .ig-card:first-of-type { margin-top: var(--space-lg); }
.ig-card > h3 { margin: 0 0 var(--space-xs); font-size: 18px; }
.ig-card > h3 + .ig-os { margin-top: var(--space-md); }
.ig-card > :last-child { margin-bottom: 0; }
.ig-card p { margin-bottom: var(--space-sm); }
.ig-writes {
	margin: var(--space-md) 0 0 !important;
	padding-top: var(--space-md);
	border-top: 1px solid var(--border);
	font-size: 14px !important;
	color: var(--ink-soft);
}
.ig-writes strong { display: block; margin-bottom: 2px; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }

.ig-callout {
	margin-top: var(--space-md);
	padding: var(--space-lg);
	background: var(--teal-100);
	border-radius: 16px;
}
.ig-callout h3 { margin: 0 0 var(--space-sm); font-size: 17px; }
.ig-callout p:last-child { margin-bottom: 0; }
.ig-callout :not(pre) > code:not(.agent-install-value) { background: rgba(255, 255, 255, 0.7); }

/* ---- OS-specific commands ---- */
/* Until JS runs, both OS commands show; after, only the visitor's. */
.agent-install-page.is-ready[data-os="sh"] [data-os-only="win"],
.agent-install-page.is-ready[data-os="win"] [data-os-only="sh"] { display: none; }
.ig-os { margin: var(--space-sm) 0 var(--space-md); }
.ig-section p.ig-os-label, .ig-os-label {
	margin: 0 0 6px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink-soft);
}
.ig-os + .ig-os { margin-top: var(--space-md); }

/* ---- Command and secret boxes: value left, compact actions top-right ---- */
.agent-install-page .agent-install-code {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: start;
	gap: 12px;
	margin: 0 0 var(--space-md);
	padding: 12px 12px 12px 18px;
	border-radius: 12px;
}
.agent-install-page .agent-install-value {
	align-self: center;
	font-size: 13.5px;
	line-height: 1.6;
	overflow-wrap: anywhere;
}
.agent-install-page .agent-install-code--cmd .agent-install-value { padding-left: 18px; }
.ig-os--win .agent-install-code--cmd .agent-install-value { padding-left: 36px; }
.ig-os--win .agent-install-code--cmd .agent-install-value::before { content: "PS>"; }
.ig-os .agent-install-code { margin-bottom: 0; }

.ig-actions { display: flex; align-items: center; gap: 6px; margin: 0; }
.agent-install-page .ig-actions .agent-install-btn {
	min-width: 64px;
	padding: 5px 12px;
	font-size: 13px;
	border-radius: 8px;
}

/* Secret boxes: muted placeholder until there is an identity. */
.ig-secret:not(.has-id) .agent-install-value { color: var(--navy-300); }
.ig-secret.is-shown .agent-install-value::after {
	content: "\A Treat it like a password.";
	white-space: pre;
	font-family: var(--font-body);
	font-size: 12px;
	color: var(--navy-300);
}

/* Multi-line configs (mcp.json, SKILL.md). */
.ig-pre .agent-install-value { margin: 0; white-space: pre-wrap; max-height: 420px; overflow: auto; }
.ig-pre .agent-install-value code { font: inherit; color: inherit; background: none; padding: 0; }
.ig-skill { margin: 0 0 var(--space-md); }
.ig-skill summary {
	cursor: pointer;
	margin-bottom: var(--space-sm);
	font-size: 15px;
	font-weight: 600;
	color: var(--ink);
}

/* "I already have an identity". */
.ig-existing { margin: 0 0 var(--space-md); }
.ig-existing summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--ink-soft); }
.ig-existing summary:hover { color: var(--ink); }
.ig-existing p { font-size: 14px; margin: 8px 0; }
.ig-existing-row { display: flex; gap: 8px; }
.ig-existing-row input {
	flex: 1;
	min-width: 0;
	padding: 8px 12px;
	font-family: var(--font-mono);
	font-size: 14px;
	border: 1px solid var(--border);
	border-radius: 10px;
}
.ig-existing-row .agent-install-btn {
	min-width: 0;
	padding: 8px 16px;
	font-size: 14px;
	color: var(--white);
	background: var(--navy-900);
}
.ig-err { margin: 6px 0 0; color: var(--danger); font-size: 13px; }
.ig-err:empty { display: none; }

/* Numbered steps. */
.ig-steps { counter-reset: ig-step; list-style: none; margin: var(--space-md) 0; padding: 0; }
.ig-steps > li {
	counter-increment: ig-step;
	position: relative;
	margin: 0 0 10px;
	padding-left: 36px;
}
.ig-steps > li::before {
	content: counter(ig-step);
	position: absolute;
	left: 0;
	top: 1px;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--navy-100);
	color: var(--ink);
	font-size: 12px;
	font-weight: 600;
	line-height: 24px;
	text-align: center;
}

.ig-warn {
	margin: var(--space-lg) 0 0 !important;
	padding: var(--space-md) var(--space-lg);
	background: var(--amber-100);
	border-left: 3px solid var(--amber-500);
	border-radius: 0 12px 12px 0;
	font-size: 15px !important;
}

/* Tables. */
.ig-tablewrap {
	margin: var(--space-md) 0 var(--space-lg);
	border: 1px solid var(--border);
	border-radius: 12px;
	overflow-x: auto;
	background: var(--white);
}
.ig-table { width: 100%; border-collapse: collapse; margin: 0; font-size: 15px; }
.ig-table th, .ig-table td {
	text-align: left;
	vertical-align: top;
	padding: 12px 16px;
	line-height: 1.55;
	border-bottom: 1px solid var(--border);
}
.ig-table tr:last-child > * { border-bottom: 0; }
.ig-table tbody th { width: 160px; font-weight: 600; white-space: nowrap; }
.ig-table thead th {
	background: var(--paper);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink-soft);
}

/* ---- Narrow screens: one column, OS switch as a sticky bar, no rail nav ---- */
@media (max-width: 960px) {
	.ig-wrap { display: block; }
	.ig-main { max-width: none; }
	.ig-rail {
		top: 64px;
		z-index: 5;
		max-height: none;
		overflow: visible;
		margin: 0 -20px var(--space-md);
		padding: 10px 20px;
		background: var(--paper);
		border-bottom: 1px solid var(--border);
	}
	.ig-nav { display: none; }
	.ig-os-switch { display: flex; align-items: center; gap: 12px; }
	.ig-os-switch .ig-rail-label { margin: 0; white-space: nowrap; }
	.ig-seg { flex: 1; max-width: 320px; }
	.agent-install-page { padding-top: 0; }
	.ig-hero { padding-top: var(--space-md); }
	.ig-card { scroll-margin-top: 136px; } /* header + sticky OS bar */
	.ig-section { scroll-margin-top: 96px; }
}
@media (max-width: 640px) {
	.ig-hero h1 { font-size: 32px; }
	.ig-lede { font-size: 16px; }
	.ig-routes { grid-template-columns: 1fr; }
	.ig-section { padding-top: var(--space-xl); margin-top: var(--space-xl); }
	.ig-section > h2 { font-size: 24px; }
	.ig-card, .ig-callout { padding: var(--space-md); }
	.ig-table th, .ig-table td { padding: 10px 12px; }
	.ig-table tbody th { width: auto; white-space: normal; }
	.ig-existing-row { flex-wrap: wrap; }
	/* Value gets the full width; Show / Copy sit under it, right-aligned. */
	.agent-install-page .agent-install-code { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 12px 12px 10px 16px; }
	.agent-install-page .ig-actions { justify-self: end; }
}