/* ==========================================================================
   Helin pages: the app page (templates/page-helin.html), the guide
   (templates/helin-docs.html) and the privacy and terms pages
   (templates/helin-page.html). Loaded after bridge-apps.css, which carries the
   shared dark look; this file adds Helin's node colours, the drawn figures
   and the guide's layout. Every selector is scoped to main.hln.
   ========================================================================== */

.hln {
	--hln-source: #4ade80;
	--hln-mod: #38bdf8;
	--hln-shape: #a78bfa;
	--hln-effect: #f472b6;
	--hln-macro: #bfa36a;
	--hln-io: #9ca3af;
	--hln-raised: #23252a;
}

/* ---------- Hero: the canvas's dot grid instead of a photo ---------- */
.hln .hln-hero {
	display: flex;
	flex-direction: column;
	justify-content: center;
	background:
		radial-gradient(ellipse 40% 34% at 50% 28%, rgba(255, 214, 10, 0.16), transparent 70%),
		radial-gradient(circle, var(--mbr-line) 1px, transparent 1.3px) 0 0 / 24px 24px,
		var(--mbr-bg);
}
.hln .hln-hero > * { position: relative; }

/* ---------- Figures (inline SVG, drawn in the app's node style) ---------- */
.hln .hln-fig {
	margin: 32px 0;
	padding: 20px 20px 16px;
	border: 1px solid var(--mbr-line);
	border-radius: 18px;
	background: rgba(15, 16, 18, 0.7);
	overflow-x: auto;
}
.hln .hln-fig--bare { border: 0; background: none; padding: 0; margin: 0; }
.hln .hln-svg { display: block; width: 100%; height: auto; min-width: var(--minw, 600px); color: var(--mbr-ink); }
.hln .hln-fig figcaption,
.hln .hln-g figcaption {
	margin-top: 12px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 13px;
	line-height: 1.5;
	color: var(--mbr-grey);
	text-align: left;
}
.hln svg text { fill: var(--mbr-ink); font-family: var(--wp--preset--font-family--archivo); }
.hln svg .nd { fill: var(--mbr-surface); stroke: var(--mbr-line); stroke-width: 1.2; }
.hln svg .md { fill: var(--hln-raised); }
.hln svg .nl { font-size: 15px; font-weight: 600; }
.hln svg .nl.sm { font-size: 13px; }
.hln svg .nl.big { font-size: 20px; }
.hln svg .ns,
.hln svg .al { font-family: var(--wp--preset--font-family--mono); font-size: 11.5px; fill: var(--mbr-grey); }
.hln svg .pin { fill: var(--mbr-bg); stroke: var(--mbr-idle); stroke-width: 1.5; }
.hln svg .kn { fill: var(--mbr-bg); stroke: var(--mbr-line); stroke-width: 1.5; }
.hln svg .ar { color: var(--mbr-idle); }
.hln svg .lead { stroke: var(--mbr-idle); stroke-width: 1; fill: none; }
.hln svg .pn { fill: var(--mbr-surface); stroke: var(--mbr-line); stroke-width: 1.2; }
.hln svg .scr { fill: #08090a; stroke: var(--mbr-line); }
.hln svg .track { fill: var(--hln-raised); }
.hln svg .mark { fill: var(--mbr-ink); }
.hln svg .vf { fill: none; stroke: var(--mbr-line); stroke-dasharray: 4 6; }
.hln svg .key { fill: #e9eaec; stroke: var(--mbr-line); }
.hln svg .plus { fill: var(--hln-raised); stroke: var(--mbr-idle); stroke-width: 1.2; }
.hln svg .tp1 { fill: rgba(242, 243, 245, 0.08); stroke: rgba(242, 243, 245, 0.35); stroke-width: 1.2; }
.hln svg .tp2 { fill: rgba(242, 243, 245, 0.55); }
.hln svg .q { fill: var(--hln-raised); stroke: var(--mbr-idle); }
.hln svg .qt { font-size: 12px; font-weight: 600; }
.hln svg .qt.sm { font-size: 11px; }

.hln .hln-gestures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 24px 0; }
.hln .hln-g { margin: 0; padding: 14px 14px 16px; border: 1px solid var(--mbr-line); border-radius: 16px; background: var(--mbr-surface); }
.hln .hln-g svg { display: block; width: 100%; height: auto; }
.hln .hln-g figcaption { font-family: inherit; font-size: 15px; color: var(--mbr-ink); }
@media (max-width: 720px) { .hln .hln-gestures { grid-template-columns: 1fr; } }

/* ---------- Node-colour chips and cards ---------- */
.hln .hln-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-width: 104px;
	font-weight: 700;
	color: var(--mbr-ink);
}
.hln .hln-chip::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--c, var(--hln-io)); }
.hln .hln-c-source { --c: var(--hln-source); }
.hln .hln-c-mod { --c: var(--hln-mod); }
.hln .hln-c-shape { --c: var(--hln-shape); }
.hln .hln-c-effect { --c: var(--hln-effect); }
.hln .hln-c-io { --c: var(--hln-io); }
.hln .hln-stages { list-style: none; padding: 0; display: grid; gap: 10px; }
.hln .mbr-card.hln-card::before { border-radius: 3px; background: var(--c); box-shadow: none; }

/* ---------- Listen: sound sample cards ---------- */
.hln-listen > h2,
.hln-listen > .mbr-eyebrow,
.hln-listen > .mbr-lede { text-align: center; margin-inline: auto; }
.hln .hln-samples { gap: 16px; margin-top: 40px; }
.hln .hln-sample { padding: 22px 22px 20px; border: 1px solid var(--mbr-line); border-radius: 16px; background: var(--mbr-surface); }
.hln .hln-sample h3 { margin: 0; font-size: 17px; }
.hln .hln-sample p { margin: 6px 0 0; font-size: 15px; }
.hln .hln-sample .hln-credit {
	margin-top: 4px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 12px;
	letter-spacing: 0.04em;
	color: var(--mbr-grey);
}
.hln .hln-sample .wp-block-audio { margin: 14px 0 0; }
.hln .hln-sample .wp-block-audio audio { width: 100%; }
.hln .hln-pending {
	margin-top: 14px !important;
	padding: 10px 14px;
	border: 1px dashed var(--mbr-line);
	border-radius: 999px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 12px !important;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--mbr-idle) !important;
}

/* ---------- Watch: video slides ---------- */
.hln .hln-video {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 16 / 9;
	max-width: 760px;
	margin: 0 auto !important;
	border: 1px dashed var(--mbr-line);
	border-radius: 14px;
	background: #08090a;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 13px !important;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--mbr-idle) !important;
}
.hln .mbr-slide .wp-block-video { max-width: 760px; margin: 0 auto; }
.hln .mbr-slide .wp-block-video video {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1920 / 1324;
	border-radius: 14px;
	background: #08090a;
}
/* Thirteen clips: let the dots wrap instead of pushing the arrows off a phone. */
.hln .mbr-slides__dots { flex-wrap: wrap; justify-content: center; min-width: 0; }
@media (max-width: 720px) {
	.hln .mbr-slides__dot { width: 20px; }
}

/* ---------- Guide link list on the app page ---------- */
.hln-guide > h2,
.hln-guide > .mbr-eyebrow,
.hln-guide > .mbr-lede { text-align: center; margin-inline: auto; }
.hln .hln-guidelist {
	list-style: none;
	padding: 0;
	margin: 32px 0 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 10px;
}
.hln .hln-guidelist a {
	display: block;
	padding: 14px 18px;
	border: 1px solid var(--mbr-line);
	border-radius: 12px;
	background: var(--mbr-surface);
	color: var(--mbr-ink);
	text-decoration: none;
	font-weight: 600;
}
.hln .hln-guidelist a:hover { border-color: var(--mbr-accent); color: var(--mbr-accent); }

/* ---------- Guide pages ---------- */
.hln-docs__wrap {
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr);
	gap: 56px;
	max-width: 1120px;
	margin: 0 auto;
	padding: 72px var(--mbr-pad) 112px;
}
.hln-docs__nav { position: sticky; top: 24px; align-self: start; }
.hln .hln-docs__home { margin: 0 0 20px; }
.hln .hln-docs__home a { color: var(--mbr-ink); text-decoration: none; font-weight: 800; font-size: 20px; }
.hln-docs__nav .mbr-eyebrow { margin-bottom: 10px; }
.hln-docs__nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.hln-docs__nav li a {
	display: block;
	padding: 7px 12px;
	border-radius: 8px;
	color: var(--mbr-grey);
	text-decoration: none;
	font-size: 15px;
}
.hln-docs__nav li a:hover { color: var(--mbr-ink); background: var(--mbr-surface); }
.hln-docs__nav .current-menu-item > a,
.hln-docs__nav a[aria-current="page"] { color: var(--mbr-ink); background: var(--mbr-surface); box-shadow: inset 2px 0 0 var(--mbr-accent); }
.hln-docs__body { max-width: 760px; min-width: 0; }
.hln h1.hln-docs__title {
	margin: 0 0 20px;
	font-weight: 800;
	font-size: clamp(36px, 5vw, 56px);
	line-height: 1.05;
	letter-spacing: -0.03em;
	color: var(--mbr-ink);
}
.hln-docs__body h2 { font-size: clamp(24px, 2.6vw, 30px) !important; margin-top: 48px !important; }
.hln-docs__body h3 { margin-top: 32px; }
.hln-docs__body :where(p, li) { color: #b9bcc3; }
.hln .hln-lede { font-size: 20px; line-height: 1.5; color: var(--mbr-ink) !important; }
.hln-docs__body ul,
.hln-docs__body ol { padding-left: 1.2em; display: grid; gap: 8px; }
.hln-docs__body .hln-steps { gap: 12px; }
.hln-docs__body .hln-steps li::marker { color: var(--mbr-accent); font-weight: 700; }
.hln .hln-next {
	margin-top: 56px;
	padding-top: 24px;
	border-top: 1px solid var(--mbr-line);
	font-weight: 700;
	color: var(--mbr-ink) !important;
}
.hln .hln-plain__wrap { max-width: 760px; margin: 0 auto; padding: 72px var(--mbr-pad) 112px; }
.hln .hln-plain__wrap h2 { font-size: 22px !important; margin-top: 40px !important; }

@media (max-width: 900px) {
	.hln-docs__wrap { grid-template-columns: 1fr; gap: 32px; padding-top: 40px; }
	.hln-docs__nav { position: static; }
	.hln-docs__nav ul { display: flex; flex-wrap: wrap; gap: 6px; }
	.hln-docs__nav li a { border: 1px solid var(--mbr-line); font-size: 14px; padding: 6px 12px; }
}
.hln-docs__nav .hln-docs__intro { margin-bottom: 2px; }
body.page-id-1084 .hln-docs__intro a { color: var(--mbr-ink); background: var(--mbr-surface); box-shadow: inset 2px 0 0 var(--mbr-accent); }
.hln-mod > h2,
.hln-mod > .mbr-eyebrow,
.hln-mod > .mbr-lede { text-align: center; margin-inline: auto; }

/* Breadcrumb eyebrow over a guide or legal page's title, back to Helin. */
.hln .hln-crumbs { margin: 0 0 14px; }
.hln .hln-crumbs a { color: var(--mbr-accent); text-decoration: none; padding: 6px 0; }
.hln .hln-crumbs a:hover { color: #ffe45c; text-decoration: underline; text-underline-offset: 3px; }
.hln .hln-crumbs span { margin: 0 6px; color: var(--mbr-idle); }