/* ============================================================
   ToolGrowth — Mobile Table of Contents      (mtoc.css v1.1.0)
   ------------------------------------------------------------
   MOBILE-ONLY component (≤768px). Desktop force-hidden; the
   desktop sidebar TOC (.tg-toc) is a separate, untouched system.

   V1.1 — COMPACT + SPECIFICITY SHIELD: the card renders inside
   .tg-single .tg-content, whose article link/list styles (blue,
   dotted underline, list margins) were bleeding into the card.
   Same cure as nav.css: scoped !important layout shield.

   The 768px breakpoint MUST match TG_MTOC_BREAKPOINT in mtoc.js.
   ============================================================ */

/* Desktop + tablets: never rendered visually. */
.tg-mtoc { display: none !important; }

@media (max-width: 768px) {

	.tg-mtoc,
	.tg-mtoc * { box-sizing: border-box; }

	.tg-mtoc {
		/* --- Design tokens (matched to the reference card) --- */
		--tgm-accent:      #ee5a52;
		--tgm-accent-deep: #d64545;
		--tgm-border:      #f0928c;
		--tgm-bg:          #fdf4f3;
		--tgm-bg-hover:    #fbe7e5;
		--tgm-badge-bg:    #f8dcd9;
		--tgm-badge-ink:   #c04a42;
		--tgm-ink:         #232733;
		--tgm-radius:      14px;

		display: block !important;
		margin: 20px 0 !important;
		padding: 13px 14px 8px !important;
		background: var(--tgm-bg);
		border: 2px solid var(--tgm-border);
		border-radius: var(--tgm-radius);
		-webkit-tap-highlight-color: transparent;
	}

	/* ---------------- header row ---------------- */
	.tg-mtoc__head {
		display: flex;
		align-items: center;
		gap: 8px;
		margin: 0 !important;
		padding: 0 0 4px !important;
	}
	.tg-mtoc__icon {
		display: inline-flex;
		flex: 0 0 auto;
		color: var(--tgm-accent);
	}
	.tg-mtoc__icon svg { width: 17px; height: 17px; }
	.tg-mtoc__title {
		flex: 1 1 auto;
		min-width: 0;
		margin: 0 !important;
		padding: 0 !important;
		font-size: 15px !important;
		line-height: 1.3 !important;
		font-weight: 700 !important;
		color: var(--tgm-accent) !important;
	}
	.tg-mtoc__toggle {
		flex: 0 0 auto;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 30px;
		height: 30px;
		margin: 0 !important;
		padding: 0 !important;
		background: transparent !important;
		border: 0 !important;
		border-radius: 50%;
		color: var(--tgm-accent) !important;
		cursor: pointer;
	}
	.tg-mtoc__toggle:hover { background: var(--tgm-bg-hover) !important; }
	.tg-mtoc__toggle svg.tg-mtoc__chev { width: 14px; height: 14px; }

	.tg-mtoc__toggle:focus-visible,
	.tg-mtoc__link:focus-visible {
		outline: 2px solid var(--tgm-accent) !important;
		outline-offset: 2px;
		border-radius: 8px;
	}

	.tg-mtoc__chev { transition: transform .28s ease; }
	.tg-mtoc.is-collapsed .tg-mtoc__chev { transform: rotate(180deg); }

	/* Screen-reader-only label for the toggle button. */
	.tg-mtoc__sr {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
		border: 0;
	}

	/* -------- collapsible panel (grid-rows animation) -------- */
	.tg-mtoc__panel {
		display: grid;
		grid-template-rows: 1fr;
		transition: grid-template-rows .3s ease;
	}
	.tg-mtoc.is-collapsed .tg-mtoc__panel { grid-template-rows: 0fr; }
	.tg-mtoc__panel-in { overflow: hidden; min-height: 0; }

	/* First-paint guard: no animation while restoring saved state. */
	.tg-mtoc--noanim .tg-mtoc__panel,
	.tg-mtoc--noanim .tg-mtoc__chev { transition: none; }

	/* ------------- list (SHIELDED from .tg-content) ------------- */
	.tg-mtoc__list {
		list-style: none !important;
		margin: 0 !important;
		padding: 0 !important;
	}
	.tg-mtoc__item {
		margin: 0 !important;
		padding: 0 !important;
		list-style: none !important;
	}
	.tg-mtoc__item--h3 { padding-left: 26px !important; }

	.tg-mtoc__link {
		display: flex !important;
		align-items: flex-start;
		gap: 8px;
		margin: 0 !important;
		padding: 5px 6px !important;
		border-radius: 8px;
		border: 0 !important;
		border-bottom: 0 !important;
		box-shadow: none !important;
		background: transparent;
		text-decoration: none !important;
		color: var(--tgm-ink) !important;
		font-size: 13.5px !important;
		font-weight: 500 !important;
		line-height: 1.4 !important;
		transition: background-color .18s ease, color .18s ease;
	}
	.tg-mtoc__item--h3 .tg-mtoc__link { font-size: 12.5px !important; }

	.tg-mtoc__num {
		flex: 0 0 auto;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 19px;
		height: 18px;
		margin: 1px 0 0 !important;
		padding: 0 5px !important;
		border-radius: 5px;
		background: var(--tgm-badge-bg) !important;
		color: var(--tgm-badge-ink) !important;
		font-size: 10.5px !important;
		font-weight: 700 !important;
		line-height: 1 !important;
		letter-spacing: .01em;
		text-decoration: none !important;
	}
	.tg-mtoc__label {
		min-width: 0;
		margin: 0 !important;
		overflow-wrap: anywhere;
		text-decoration: none !important;
	}

	/* Hover + pressed states */
	.tg-mtoc__link:hover {
		background: var(--tgm-bg-hover) !important;
		color: var(--tgm-accent-deep) !important;
		text-decoration: none !important;
	}
	.tg-mtoc__link:active { background: #f9dbd8 !important; }

	/* Active heading while scrolling (dotted underline = reference) */
	.tg-mtoc__link.is-active {
		color: var(--tgm-accent-deep) !important;
		font-weight: 600 !important;
	}
	.tg-mtoc__link.is-active .tg-mtoc__label {
		text-decoration: underline dotted !important;
		text-underline-offset: 3px;
		text-decoration-thickness: 1.5px;
	}
	.tg-mtoc__link.is-active .tg-mtoc__num {
		background: var(--tgm-accent) !important;
		color: #fff !important;
	}

	/* Anchor landing offset: theme already sets scroll-margin-top:96px on
	   .tg-content h2/h3 (single.css) — no duplicate rule needed here. */
}

/* Smooth in-page scrolling — mobile only, reduced-motion respected. */
@media (max-width: 768px) and (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}

@media (prefers-reduced-motion: reduce) {
	.tg-mtoc__panel,
	.tg-mtoc__chev,
	.tg-mtoc__link { transition: none !important; }
}

@media print {
	.tg-mtoc { display: none !important; }
}