/**
 * LMS Platform: product tour + integrations.
 *
 * Loaded as its own stylesheet, so it defines only new `.howto-*` /
 * `.integration*` classes and never reaches into the design system above it.
 * Every colour comes from a token, which is the whole of the dark-mode story:
 * there is nothing here to re-declare for it.
 */

/* ══ How it works ══ */

/**
 * PER APP COLOUR, FROM ONE PROPERTY.
 *
 * A tab and its panel each carry `--tile`, the app's own colour out of the
 * catalog, validated as a hex triplet in the template before it is allowed
 * near a style attribute. Every tint below reads that one property, so the
 * section already knows how to paint an app that does not exist yet.
 *
 * `--howto-tint` and `--howto-line` are the strengths those tints mix at. A
 * dark surface swallows a 9% wash, so the two dark blocks raise the numbers
 * instead of restating every rule underneath them.
 */
.howto {
	--howto-tint: 9%;
	--howto-line: 26%;
	margin-top: 8px;
}

:root[data-theme='dark'] .howto {
	--howto-tint: 17%;
	--howto-line: 36%;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme='light']) .howto {
		--howto-tint: 17%;
		--howto-line: 36%;
	}
}

/* The tab bar scrolls inside itself. Eight app tabs at 360px would otherwise
   widen the page, and a horizontally scrolling body breaks every section. */
.howto-tabs {
	display: flex;
	gap: 6px;
	overflow-x: auto;
	scrollbar-width: none;
	padding: 6px;
	margin: 0 0 var(--gap-head);
	background: var(--bg-mute);
	border-radius: var(--r-full);
	border: 1px solid var(--border-soft);
}

.howto-tabs::-webkit-scrollbar { display: none; }

.howto-tab {
	--tile: var(--brand);
	position: relative;
	overflow: hidden;
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: 0;
	cursor: pointer;
	white-space: nowrap;
	padding: 10px 18px;
	border-radius: var(--r-full);
	font-size: 0.92rem;
	font-weight: 600;
	color: var(--text-2);
	background: transparent;
	transition: color 0.18s var(--ease), background 0.18s var(--ease), box-shadow 0.18s var(--ease);
}

.howto-tab__icon {
	display: inline-flex;
	color: var(--text-3);
	transition: color 0.18s var(--ease);
}

.howto-tab:hover {
	color: var(--text);
	background: color-mix(in srgb, var(--tile) 7%, transparent);
}

/**
 * The active tab lifts onto a surface and wears a TINT of its app rather than
 * a solid fill of it. Solid would have to work for every colour a Super Admin
 * can pick, and white on a #22c55e pill is already unreadable at 2:1. The tint
 * is also the language the AI band set, which is the one part of this page the
 * owner has said already looks designed.
 */
.howto-tab.is-active {
	color: var(--text);
	background:
		radial-gradient(120% 150% at 50% 0%, color-mix(in srgb, var(--tile) var(--howto-tint), transparent) 0%, transparent 72%),
		var(--surface);
	box-shadow: var(--shadow-sm), inset 0 0 0 1px color-mix(in srgb, var(--tile) var(--howto-line), transparent);
}

.howto-tab.is-active .howto-tab__icon { color: var(--tile); }

/* The signature hairline the header, the app cards and the integrations grid
   all carry, so the tour belongs to the same page as the rest. */
.howto-tab::before {
	content: '';
	position: absolute;
	inset: 0 0 auto;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--tile), transparent);
	opacity: 0;
	transition: opacity 0.2s var(--ease);
}

.howto-tab.is-active::before { opacity: 1; }

/* Only the enhanced version hides anything: with the script blocked, the
   attribute is never set and all panels and screenshots stay on the page. */
[data-howto-ready] .howto-panel--hidden { display: none; }

.howto-panel {
	--tile: var(--brand);
	outline: none;
}

.howto-panel + .howto-panel { margin-top: var(--gap-block); }

/* There for a screen reader, and for the visitor whose browser ran no script
   and therefore has an inert tab bar. Everyone else is told which app they
   are reading by the tab itself. */
.howto-panel__label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	overflow: hidden;
	white-space: nowrap;
	clip-path: inset(50%);
}

.howto-intro {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px 24px;
	margin: 0 0 22px;
}

.howto-intro p {
	margin: 0;
	max-width: 64ch;
	font-size: 0.98rem;
	color: var(--text-2);
}

/* Mixed toward the text colour rather than set to the raw app colour: a link
   has to stay readable when the app it belongs to is bright green, and the
   mix also flips correctly on a dark background. */
.howto-cta {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	flex: none;
	font-size: 0.92rem;
	font-weight: 600;
	text-decoration: none;
	color: color-mix(in srgb, var(--tile) 60%, var(--text));
	transition: gap 0.2s var(--ease), opacity 0.2s var(--ease);
}

.howto-cta:hover {
	gap: 11px;
	opacity: 0.82;
	color: color-mix(in srgb, var(--tile) 60%, var(--text));
}

.howto-body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	gap: clamp(24px, 4vw, 48px);
	align-items: start;
}

/* No screenshot in this panel, so the steps take the full width rather than
   sit beside an empty frame. */
.howto-body--solo { grid-template-columns: minmax(0, 1fr); }

.howto-steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px;
}

.howto-body--solo .howto-steps {
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 16px;
}

.howto-step {
	position: relative;
	overflow: hidden;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 16px;
	padding: 18px;
	border-radius: var(--r-md);
	border: 1px solid transparent;
	background: transparent;
	cursor: pointer;
	transition: background 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.howto-step:hover { background: var(--bg-soft); }

.howto-step.is-active {
	background:
		radial-gradient(90% 130% at 0% 0%, color-mix(in srgb, var(--tile) var(--howto-tint), transparent) 0%, transparent 58%),
		var(--surface);
	border-color: color-mix(in srgb, var(--tile) var(--howto-line), var(--border));
	box-shadow: var(--shadow);
}

/* The same hairline as the tabs, stood on its end. */
.howto-step::before {
	content: '';
	position: absolute;
	inset: 0 auto 0 0;
	width: 2px;
	background: linear-gradient(180deg, transparent, var(--tile), transparent);
	opacity: 0;
	transition: opacity 0.2s var(--ease);
}

.howto-step.is-active::before { opacity: 1; }

.howto-step__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	flex: none;
	border-radius: var(--r);
	font-size: 0.82rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.02em;
	color: var(--text-3);
	background: var(--bg-mute);
	border: 1px solid var(--border-soft);
	transition: color 0.2s var(--ease), background 0.2s var(--ease), border-color 0.2s var(--ease);
}

.howto-step.is-active .howto-step__num {
	color: color-mix(in srgb, var(--tile) 78%, var(--text));
	background: color-mix(in srgb, var(--tile) var(--howto-tint), transparent);
	border-color: color-mix(in srgb, var(--tile) var(--howto-line), transparent);
}

.howto-step__main { min-width: 0; }

.howto-step__title {
	margin: 0 0 4px;
	font-size: 1.05rem;
	font-weight: 650;
	line-height: 1.35;
}

/* The button carries no chrome of its own: the whole row is the hit target,
   and the button exists so keyboard users get one too. */
.howto-step__btn {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	text-align: left;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
}

/* The title stays in the text colour when active. Recolouring it to the app's
   own would put body-sized text at 2:1 for any bright app, and the mark to its
   left already says which row is open. */
.howto-step.is-active .howto-step__btn { color: var(--text); }

.howto-step__icon {
	display: inline-flex;
	color: var(--text-3);
	flex: none;
	transition: color 0.2s var(--ease);
}

.howto-step.is-active .howto-step__icon { color: color-mix(in srgb, var(--tile) 78%, var(--text)); }

.howto-step__main p {
	margin: 0;
	font-size: 0.94rem;
	color: var(--text-2);
}

/**
 * THE MODULE FALLBACK.
 *
 * An app that has shipped but has no tour written for it still has to say
 * something true, and its real module list does exactly that. Rendered as a
 * list and not as numbered steps, because these are things a customer gets,
 * not an order they do them in. Nothing here is clickable: there is no
 * screenshot behind a module name, and a tile that lights up but leads
 * nowhere is a promise the page cannot keep.
 */
.howto-mods { min-width: 0; }

.howto-mods__label {
	margin: 0 0 14px;
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--text-3);
}

.howto-mods__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 10px;
}

.howto-mod {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 13px 15px;
	border-radius: var(--r-md);
	border: 1px solid var(--border-soft);
	background:
		radial-gradient(130% 140% at 0% 0%, color-mix(in srgb, var(--tile) var(--howto-tint), transparent) 0%, transparent 62%),
		var(--surface);
	font-size: 0.93rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--text);
	transition: transform 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.howto-mod:hover {
	transform: translateY(-2px);
	border-color: color-mix(in srgb, var(--tile) var(--howto-line), var(--border));
	box-shadow: 0 16px 30px -22px color-mix(in srgb, var(--tile) 62%, transparent), var(--shadow-sm);
}

.howto-mod__mark {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	flex: none;
	border-radius: 10px;
	color: color-mix(in srgb, var(--tile) 78%, var(--text));
	background: color-mix(in srgb, var(--tile) var(--howto-tint), transparent);
	border: 1px solid color-mix(in srgb, var(--tile) var(--howto-line), transparent);
}

.howto-media {
	position: sticky;
	top: calc(var(--header-h) + 24px);
	display: grid;
	gap: 16px;
	min-width: 0;
}

[data-howto-ready] .howto-shot:not(.is-active) { display: none; }

.howto-shot {
	margin: 0;
	border-radius: var(--r-lg);
	border: 1px solid var(--border);
	background: var(--surface);
	box-shadow: var(--shadow-lg);
	overflow: hidden;
}

.howto-shot img {
	width: 100%;
	height: auto;
	display: block;
}

.howto-shot__cap {
	padding: 12px 16px;
	font-size: 0.84rem;
	color: var(--text-3);
	border-top: 1px solid var(--border-soft);
	background: var(--bg-soft);
}

@media (max-width: 900px) {
	.howto-body { grid-template-columns: minmax(0, 1fr); }
	.howto-media { position: static; }
}

@media (max-width: 560px) {
	.howto-intro { align-items: flex-start; }
	.howto-mods__list { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 420px) {
	.howto-step { padding: 14px; gap: 12px; }
	.howto-step__num { width: 32px; height: 32px; }
	.howto-tab { padding: 9px 14px; font-size: 0.86rem; }
	.howto-mod { padding: 12px 13px; }
}

/* Nothing in the tour loops or advances on its own by design, so these are
   the only moving parts there are to stop. */
@media (prefers-reduced-motion: reduce) {
	.howto-tab,
	.howto-tab::before,
	.howto-tab__icon,
	.howto-step,
	.howto-step::before,
	.howto-step__num,
	.howto-step__icon,
	.howto-mod,
	.howto-cta {
		transition: none;
	}

	.howto-mod:hover { transform: none; }
	.howto-cta:hover { gap: 7px; }
}

/* ══ Integrations ══ */
.integrations-count {
	display: flex;
	align-items: baseline;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 22px;
	text-align: center;
}

.integrations-count strong {
	font-size: clamp(2rem, 1.3rem + 2.4vw, 3rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
	background: var(--brand-grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.integrations-count span {
	font-size: 1rem;
	color: var(--text-2);
}

.integrations-filter {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 0 0 28px;
}

.integrations-chip {
	border: 1px solid var(--border);
	background: var(--surface);
	color: var(--text-2);
	cursor: pointer;
	padding: 8px 16px;
	border-radius: var(--r-full);
	font-size: 0.86rem;
	font-weight: 600;
	transition: color 0.18s var(--ease), border-color 0.18s var(--ease), background 0.18s var(--ease);
}

.integrations-chip:hover { color: var(--text); border-color: var(--text-3); }

.integrations-chip.is-active {
	color: var(--on-brand, #fff);
	background: var(--brand-grad);
	border-color: transparent;
}

.integrations-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 14px;
}

.integration {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 22px 16px;
	text-align: center;
	border-radius: var(--r-md);
	border: 1px solid var(--border);
	background: var(--surface);
	box-shadow: var(--shadow-sm);
	color: var(--text);
	transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), border-color 0.2s var(--ease);
}

.integration--linked:hover {
	transform: translateY(-3px);
	border-color: color-mix(in srgb, var(--brand) 40%, var(--border));
	box-shadow: var(--shadow);
	color: var(--text);
}

.integration--out { display: none; }

.integration__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 44px;
}

.integration__logo img {
	max-height: 44px;
	width: auto;
	object-fit: contain;
}

/* No logo uploaded: the name becomes the mark, so the tile still reads as a
   brand instead of a missing-image box. */
.integration__wordmark {
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	background: var(--brand-grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.integration__name {
	font-size: 0.92rem;
	font-weight: 600;
	line-height: 1.3;
}

.integration__cat {
	font-size: 0.72rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--text-3);
}

.integrations-foot {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	margin-top: 34px;
	text-align: center;
}

.integrations-foot p {
	margin: 0;
	max-width: 620px;
	color: var(--text-2);
}

@media (max-width: 420px) {
	.integrations-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
	.integration { padding: 18px 12px; }
}

@media (prefers-reduced-motion: reduce) {
	.howto-step,
	.howto-tab,
	.integration,
	.integrations-chip {
		transition: none;
	}

	.integration--linked:hover { transform: none; }
}

/* ══════════════════════════════════════════════════════════════════
   Integrations, second pass
   ══════════════════════════════════════════════════════════════════
   The grid was structurally fine and visually flat: almost no
   integration has a logo uploaded, so every tile fell back to the
   name as text and the section became fourteen identical grey boxes.

   Each card now carries `--tile`, a colour derived from its own name
   in integrations.php, and the same craft the AI band uses: a soft
   tint instead of a flat fill, a hairline that lights up on hover,
   and a tile that lifts. Light section, so the tints stay low.
   ────────────────────────────────────────────────────────────────── */

.integration {
	--tile: var(--brand);
	position: relative;
	overflow: hidden;
	gap: 12px;
	background:
		radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--tile) 8%, transparent) 0%, transparent 62%),
		var(--surface);
}

/* The signature hairline, matching the header and the app cards. */
.integration::before {
	content: '';
	position: absolute;
	inset: 0 0 auto;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--tile), transparent);
	opacity: 0;
	transition: opacity 0.2s var(--ease);
}
.integration--linked:hover::before { opacity: 1; }

.integration--linked:hover {
	border-color: color-mix(in srgb, var(--tile) 38%, var(--border));
	box-shadow: 0 18px 34px -22px color-mix(in srgb, var(--tile) 62%, transparent), var(--shadow);
}

/* The monogram replaces a wrapping wordmark, so every tile is the same
   height and the grid finally lines up. */
.integration__monogram {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 13px;
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1;
	color: var(--tile);
	background: color-mix(in srgb, var(--tile) 14%, transparent);
	border: 1px solid color-mix(in srgb, var(--tile) 24%, transparent);
	transition: transform 0.2s var(--ease);
}
.integration--linked:hover .integration__monogram { transform: scale(1.08) rotate(-4deg); }

.integration__name { font-size: 0.88rem; font-weight: 620; }

.integration__cat {
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--text-3);
	padding: 2px 8px;
	border-radius: var(--r-full);
	background: var(--bg-mute);
}

/* Filter chips: the active one carries the brand gradient, the rest stay
   quiet, and the row scrolls rather than wrapping to three lines on a phone. */
.integrations-filter {
	flex-wrap: nowrap;
	overflow-x: auto;
	scrollbar-width: none;
	padding-bottom: 2px;
}
.integrations-filter::-webkit-scrollbar { display: none; }
.integrations-chip { flex: none; }
.integrations-chip.is-active {
	box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--brand) 70%, transparent);
}

@media (min-width: 700px) {
	.integrations-filter { flex-wrap: wrap; overflow: visible; }
}