/* TK - Section Help — front-end
   Self-contained: bridges to Studio 3.0 tokens with safe fallbacks. */

.tksh {
	--tksh-bg:     var(--white-cards, #ffffff);
	--tksh-text:   var(--body, #5a3e2b);
	--tksh-head:   var(--headings, #1e120a);
	--tksh-link:   var(--links, #2e6b5e);
	--tksh-border: var(--espresso-l-8, #c2bebc);
	--tksh-muted:  var(--espresso-l-5, #857e79);
	--tksh-accent: var(--teal, #2e6b5e);
	--tksh-radius: 12px;

	position: relative;
	display: inline-flex;
	margin-left: auto; /* right-aligns inside a flex header bar (e.g. next to a breadcrumb) */
	font-family: "DM Sans", sans-serif;
}

/* ---- Trigger (matches the old "How does this work?" link) ---- */
.tksh__toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	font: inherit;
	font-size: 15px;
	line-height: 1;
	color: #363636;
	transition: color .15s ease;
	-webkit-appearance: none;
	appearance: none;
}
.tksh__toggle:hover { color: var(--tksh-link); }
.tksh__toggle:focus-visible {
	outline: 2px solid var(--tksh-accent);
	outline-offset: 3px;
	border-radius: 4px;
}

.tksh__q { display: inline-flex; align-items: center; }
.tksh__qicon { width: 1.07em; height: 1.07em; display: block; }

.tksh__label { white-space: nowrap; line-height: 1; }

.tksh__chevwrap { display: inline-flex; align-items: center; }
.tksh__chev {
	width: 0.95em;
	height: 0.95em;
	display: block;
	transition: transform .25s ease;
}
.tksh.is-open .tksh__chev { transform: rotate(180deg); }

/* ---- Panel (drops below the trigger, right-aligned) ---- */
.tksh__panel {
	position: absolute;
	top: calc(100% + 12px);
	right: 0;
	z-index: 60;
	width: min(420px, calc(100vw - 16px));
	background: var(--tksh-bg);
	color: var(--tksh-text);
	border: 1px solid var(--tksh-border);
	border-left: 4px solid var(--tksh-accent);
	border-radius: var(--tksh-radius);
	box-shadow: 0 12px 34px rgba(31, 18, 10, .18);
	padding: 16px 18px;

	/* animation */
	opacity: 0;
	transform: translateY(-6px);
	transition: opacity .2s ease, transform .2s ease;
	pointer-events: none;
}
.tksh__panel[hidden] { display: none; }
.tksh.is-open .tksh__panel {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

/* little caret pointing up at the trigger */
.tksh__caret {
	position: absolute;
	top: -7px;
	right: 22px;
	width: 13px;
	height: 13px;
	background: var(--tksh-bg);
	border-left: 1px solid var(--tksh-border);
	border-top: 1px solid var(--tksh-border);
	transform: rotate(45deg);
}

.tksh__body { font-size: 15px; line-height: 1.55; }
.tksh__body p { margin: 0 0 .6em; }
.tksh__body p:last-child { margin-bottom: 0; }
.tksh__body strong { color: var(--tksh-head); }

.tksh__link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: 12px;
	font-size: 14px;
	font-weight: 600;
	color: var(--tksh-link);
	text-decoration: none;
}
.tksh__link svg { width: 16px; height: 16px; transition: transform .18s ease; }
.tksh__link:hover { text-decoration: underline; }
.tksh__link:hover svg { transform: translateX(3px); }