/* ==========================================================================
   Floating dock — site navigation, one tap from every page.

   On inner pages it is fixed to the bottom-left: the one corner a thumb can
   reach without moving its grip, and the one place it never fights the
   content. Inside the immersive home scene (.tk-imm) it goes back under the
   wordmark where it started, because there it belongs to the hero.

   It carries its own colour variables so it looks the same on pages that do
   not load the immersive stylesheet.
   ========================================================================== */

.tk-dock {
	--violet: 155 124 246;
	--cyan: 125 211 252;

	position: fixed;
	left: clamp(14px, 2.4vw, 28px);
	bottom: calc(16px + env(safe-area-inset-bottom, 0px));
	z-index: 9000;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	transition: opacity .45s ease, transform .45s ease;
}

.tk-dock__bar {
	display: flex;
	align-items: center;
	gap: 9px;
}

.tk-dock__pill,
.tk-dock__sq {
	border: 1px solid rgba(223, 241, 246, .17);
	background: rgba(7, 13, 26, .82);
	color: rgba(223, 241, 246, .84);
	cursor: pointer;
	transition: border-color .28s ease, background .28s ease,
		color .28s ease, transform .28s ease;
}

.tk-dock__pill {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	height: 48px;
	padding: 0 20px 0 15px;
	border-radius: 999px;
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 500;
	letter-spacing: .05em;
	white-space: nowrap;
}

.tk-dock__pill svg { width: 19px; height: 19px; }

.tk-dock__sq {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border-radius: 15px;
	text-decoration: none !important;
}

.tk-dock__sq svg { width: 21px; height: 21px; }

.tk-dock__pill svg,
.tk-dock__sq svg {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.35;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.tk-dock__pill:hover,
.tk-dock__sq:hover {
	border-color: rgb(var(--violet) / .55);
	background: rgba(20, 20, 46, .88);
	color: #fff;
	transform: translateY(-1px);
}

.tk-dock__pill[aria-expanded="true"],
.tk-dock__sq[aria-expanded="true"] {
	border-color: rgb(var(--violet) / .62);
	background: rgb(var(--violet) / .15);
	color: #fff;
}

/* Panes grow upward out of the bar. */
.tk-dock__pane {
	order: -1;
	width: min(336px, calc(100vw - 32px));
	max-height: calc(100dvh - 140px);
	overflow-y: auto;
	padding: 17px 18px 15px;
	border: 1px solid rgba(223, 241, 246, .13);
	border-radius: 19px;
	background: #070c19;
	box-shadow: 0 28px 64px -22px rgba(0, 0, 0, .9);
	transform-origin: bottom left;
	animation: tk-dock-up .3s cubic-bezier(.16, .84, .34, 1) both;
}

.tk-dock__pane[hidden] { display: none; }

@keyframes tk-dock-up {
	from { opacity: 0; transform: translateY(9px) scale(.975); }
	to   { opacity: 1; transform: none; }
}

@keyframes tk-dock-in {
	from { opacity: 0; transform: translateY(-7px) scale(.975); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.tk-dock__pane { animation: none; }
	.tk-dock__pill:hover, .tk-dock__sq:hover { transform: none; }
}

/* — card of the day — */
.tk-dock__label {
	margin: 0 0 13px;
	font-size: 9.5px;
	letter-spacing: .26em;
	text-transform: uppercase;
	color: rgb(var(--violet));
	opacity: .9;
}

.tk-dock__card {
	display: flex;
	align-items: center;
	gap: 13px;
}

.tk-dock__thumb {
	flex: 0 0 auto;
	width: 57px;
	height: 99px;
	object-fit: cover;
	border-radius: 6px;
	border: 1px solid rgba(223, 241, 246, .14);
	box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .9);
}

.tk-dock__meta { min-width: 0; }

.tk-dock__name {
	margin: 0;
	font-size: 17px;
	font-weight: 500;
	letter-spacing: -.01em;
	color: #fff;
}

.tk-dock__orient {
	margin: 3px 0 0;
	font-size: 9.5px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: rgb(var(--cyan));
}

.tk-dock__kw {
	margin: 7px 0 0;
	font-size: 11.5px;
	line-height: 1.5;
	color: rgba(223, 241, 246, .52);
}

.tk-dock__text {
	margin: 13px 0 0;
	font-size: 12.5px;
	line-height: 1.64;
	color: rgba(223, 241, 246, .68);
}

.tk-dock__more {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: 13px;
	font-size: 11.5px;
	letter-spacing: .06em;
	color: rgb(var(--violet));
	text-decoration: none !important;
	transition: color .25s ease, gap .25s ease;
}

.tk-dock__more svg {
	width: 14px;
	height: 14px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.tk-dock__more:hover { color: rgb(var(--cyan)); gap: 11px; }

/* — site menu — */
.tk-dock__nav { display: block; }

.tk-dock__nav a {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 2px;
	border-bottom: 1px solid rgba(223, 241, 246, .07);
	color: rgba(223, 241, 246, .84);
	text-decoration: none !important;
	transition: color .25s ease, padding-left .25s ease;
}

.tk-dock__nav a:last-child { border-bottom: 0; }

.tk-dock__nav a span {
	font-size: 12.5px;
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.tk-dock__nav a em {
	font-style: normal;
	font-size: 11px;
	color: rgba(223, 241, 246, .5);
}

.tk-dock__nav a:hover { color: #fff; padding-left: 6px; }
.tk-dock__nav a:hover em { color: rgb(var(--violet)); }

/* Pricing and legal: present, but deliberately understated. */
.tk-dock__sub {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 7px;
	margin: 4px 0 0;
	padding-top: 12px;
	border-top: 1px solid rgba(223, 241, 246, .07);
	font-size: 11px;
	letter-spacing: .04em;
	color: rgba(223, 241, 246, .42);
}

.tk-dock__sub a {
	color: rgba(223, 241, 246, .56);
	text-decoration: none !important;
	transition: color .25s ease;
}

.tk-dock__sub a:hover { color: rgb(var(--violet)); }
.tk-dock__sub span { color: rgba(223, 241, 246, .2); }

/* --------------------------------------------------------------------------
   Inside the immersive scene the dock is part of the hero again: absolute
   under the wordmark, panes opening downward. On a phone the top-left corner
   is where a thumb cannot reach, so it goes back to the bottom there.
   -------------------------------------------------------------------------- */

.tk-imm .tk-dock {
	position: absolute;
	left: clamp(18px, 4vw, 44px);
	top: clamp(54px, 4.6vw, 64px);
	bottom: auto;
	/* Above the scene footer: the footer is position:relative, so anything
	   with a z-index wins, and the dock used to disappear behind it at the
	   bottom of the home page. */
	z-index: 60;
}

.tk-imm .tk-dock__pane {
	order: 0;
	width: min(336px, calc(100vw - 40px));
	transform-origin: top left;
	animation-name: tk-dock-in;
}

/* While a reading is on the table the dock steps out of the way. */
.tk-imm[data-state="shuffling"] .tk-dock,
.tk-imm[data-state="spread"] .tk-dock,
.tk-imm[data-state="revealed"] .tk-dock {
	opacity: 0;
	pointer-events: none;
	transform: translateY(-6px);
}

@media (max-width: 720px) {
	.tk-imm .tk-dock {
		position: fixed;
		left: 16px;
		right: auto;
		top: auto;
		bottom: calc(16px + env(safe-area-inset-bottom, 0px));
		gap: 9px;
	}
	.tk-imm .tk-dock__pill { height: 46px; padding: 0 17px 0 13px; font-size: 12.5px; gap: 8px; }
	.tk-imm .tk-dock__pill svg { width: 17px; height: 17px; }
	.tk-imm .tk-dock__sq { width: 46px; height: 46px; border-radius: 13px; }
	.tk-imm .tk-dock__sq svg { width: 19px; height: 19px; }
	.tk-imm .tk-dock__pane {
		order: -1;
		width: calc(100vw - 32px);
		padding: 15px 15px 13px;
		transform-origin: bottom left;
		animation-name: tk-dock-up;
	}
}

/* Tucked away while the visitor is scrolling through a page. */
.tk-dock.is-tucked {
	opacity: 0;
	transform: translateY(calc(100% + 24px));
	pointer-events: none;
}

/* The dock hangs over the bottom-left corner; give the last line of the page
   room so it never sits underneath it. */
body.tk-has-dock .site-footer,
body.tk-has-dock .tk-sitefoot {
	padding-bottom: 92px;
}

@media (max-width: 720px) {
	body.tk-has-dock .site-footer,
	body.tk-has-dock .tk-sitefoot,
	body.tk-immersive .tk-sitefoot {
		padding-bottom: 108px;
	}
}

/* --------------------------------------------------------------------------
   Breadcrumbs — the clickable half of the BreadcrumbList that Rank Math
   already prints into the schema. Guide sub-pages and the card index had the
   data but nothing on screen.
   -------------------------------------------------------------------------- */

.tk-crumbs {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 9px;
	margin: 0 0 22px;
	font-size: 11.5px;
	letter-spacing: .05em;
	color: rgba(223, 241, 246, .45);
	min-width: 0;
}

.tk-crumbs a {
	flex: 0 1 auto;
	min-width: 0;
	color: rgba(223, 241, 246, .58);
	text-decoration: none !important;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: color .25s ease;
}

.tk-crumbs a:hover { color: rgb(155 124 246); }
.tk-crumbs__here {
	flex: 0 1 auto;
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: rgba(223, 241, 246, .82);
}
.tk-crumbs__sep { flex: 0 0 auto; color: rgba(223, 241, 246, .2); }

/* On a phone the current page is the longest string in the line and it is
   already the H1 directly below — keep the trail, drop the echo. */
@media (max-width: 720px) {
	.tk-crumbs { margin-bottom: 18px; font-size: 11px; gap: 7px; }
	.tk-crumbs__here,
	.tk-crumbs__sep--end { display: none; }
}