/*
 * Aynexon Tech Fluency Handbook — secure reader.
 * Scoped entirely under .tfhb so nothing here can reach the rest of the site.
 * Palette and type mirror index.html (--orange #FF8C42, Poppins display, Inter body).
 */

.tfhb {
	--tfhb-bg: #0b0a09;
	--tfhb-bg-2: #100e0c;
	--tfhb-card: #15110d;
	--tfhb-card-2: #1b1510;
	--tfhb-line: rgba(255, 140, 66, .16);
	--tfhb-line-2: rgba(255, 255, 255, .08);
	--tfhb-orange: #FF8C42;
	--tfhb-orange-2: #FFA866;
	--tfhb-text: #f6f5f3;
	--tfhb-muted: #b3aca3;
	--tfhb-muted-2: #8d867c;
	--tfhb-rad: 16px;
	--tfhb-display: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--tfhb-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

	font-family: var(--tfhb-body);
	color: var(--tfhb-text);
	line-height: 1.6;

	/* Copy protection, part 1: nothing in the reader is selectable or callout-able. */
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
	-webkit-tap-highlight-color: transparent;
}

.tfhb *,
.tfhb *::before,
.tfhb *::after { box-sizing: border-box; }

.tfhb img,
.tfhb .tfhb-page {
	-webkit-user-drag: none;
	-khtml-user-drag: none;
	-moz-user-drag: none;
	user-drag: none;
}

.tfhb .tfhb-sr {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ───────────────────────────── Gate ───────────────────────────── */

.tfhb-gate {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 56px 20px 72px;
	background:
		radial-gradient(1100px 520px at 50% -10%, rgba(255, 140, 66, .10), transparent 62%),
		linear-gradient(180deg, var(--tfhb-bg), var(--tfhb-bg-2));
	border-radius: var(--tfhb-rad);
}

.tfhb-gate-card {
	width: 100%;
	max-width: 460px;
	background: linear-gradient(180deg, var(--tfhb-card), var(--tfhb-card-2));
	border: 1px solid var(--tfhb-line);
	border-radius: 20px;
	padding: 38px 32px 30px;
	box-shadow: 0 26px 70px rgba(0, 0, 0, .5);
	text-align: center;
}

.tfhb-brand {
	font-family: var(--tfhb-display);
	font-weight: 700;
	font-size: 14px;
	letter-spacing: .34em;
	color: var(--tfhb-text);
}

.tfhb-overline {
	margin-top: 9px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--tfhb-orange);
}

.tfhb-gate-title {
	font-family: var(--tfhb-display);
	font-size: clamp(22px, 5vw, 27px);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -.01em;
	margin: 20px 0 10px;
	color: var(--tfhb-text);
}

.tfhb-gate-lead {
	font-size: 14.5px;
	color: var(--tfhb-muted);
	margin: 0 0 24px;
}

.tfhb-form { text-align: left; }

.tfhb-label {
	display: block;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--tfhb-muted-2);
	margin-bottom: 9px;
}

.tfhb-code-input {
	width: 100%;
	background: rgba(0, 0, 0, .34);
	border: 1px solid var(--tfhb-line-2);
	border-radius: 13px;
	color: var(--tfhb-text);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 21px;
	font-weight: 600;
	letter-spacing: .16em;
	text-align: center;
	padding: 17px 14px;
	transition: border-color .18s, box-shadow .18s;
	/* The code field is the one place typing must work. */
	-webkit-user-select: text;
	user-select: text;
}

.tfhb-code-input::placeholder { color: #5c554d; letter-spacing: .12em; }

.tfhb-code-input:focus {
	outline: none;
	border-color: var(--tfhb-orange);
	box-shadow: 0 0 0 4px rgba(255, 140, 66, .14);
}

.tfhb-code-input:disabled { opacity: .5; cursor: not-allowed; }

.tfhb-code-input.is-error {
	border-color: #e4573d;
	box-shadow: 0 0 0 4px rgba(228, 87, 61, .13);
}

/* Honeypot: off-screen rather than display:none, which some bots skip. */
.tfhb-hp {
	position: absolute !important;
	left: -9999px !important;
	top: auto !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

.tfhb-btn {
	width: 100%;
	margin-top: 16px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-family: var(--tfhb-body);
	font-weight: 700;
	font-size: 15px;
	padding: 15px 24px;
	border: 1px solid transparent;
	border-radius: 12px;
	cursor: pointer;
	color: #1a0e03;
	background: linear-gradient(180deg, var(--tfhb-orange-2), var(--tfhb-orange));
	box-shadow: 0 10px 30px rgba(255, 140, 66, .28);
	transition: transform .18s, box-shadow .18s, opacity .18s;
}

.tfhb-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(255, 140, 66, .38); }
.tfhb-btn:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }
.tfhb-btn.is-busy { pointer-events: none; opacity: .8; }

.tfhb-spinner {
	width: 16px; height: 16px;
	border: 2px solid rgba(0, 0, 0, .25);
	border-top-color: #1a0e03;
	border-radius: 50%;
	animation: tfhb-spin .8s linear infinite;
	display: inline-block;
}

.tfhb-page-load .tfhb-spinner {
	width: 30px; height: 30px;
	border: 3px solid rgba(255, 255, 255, .14);
	border-top-color: var(--tfhb-orange);
}

@keyframes tfhb-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
	.tfhb-spinner { animation-duration: 2.4s; }
	.tfhb-btn { transition: none; }
}

.tfhb-msg {
	min-height: 20px;
	margin: 13px 2px 0;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--tfhb-muted);
}

.tfhb-msg.is-error { color: #ff9d86; }
.tfhb-msg.is-ok { color: #7fd6a2; }

.tfhb-alert {
	background: rgba(228, 87, 61, .10);
	border: 1px solid rgba(228, 87, 61, .34);
	border-radius: 12px;
	padding: 12px 15px;
	margin: 0 0 20px;
	font-size: 13.5px;
	line-height: 1.55;
	color: #ffb6a3;
	text-align: left;
}

.tfhb-gate-foot {
	margin-top: 26px;
	padding-top: 20px;
	border-top: 1px solid var(--tfhb-line-2);
	font-size: 12.5px;
	line-height: 1.65;
	color: var(--tfhb-muted-2);
	text-align: left;
}

.tfhb-gate-foot p { margin: 0 0 8px; }
.tfhb-gate-foot strong { color: var(--tfhb-muted); }
.tfhb-gate-help a { color: var(--tfhb-orange); text-decoration: none; }
.tfhb-gate-help a:hover { text-decoration: underline; }
.tfhb-dot { opacity: .5; margin: 0 6px; }

/* ───────────────────────────── Reader ───────────────────────────── */

.tfhb-reader {
	display: flex;
	flex-direction: column;
	/* Sized to the viewport but left in the document flow, so the site header and
	   footer stay exactly where they were. */
	height: calc(100vh - 96px);
	height: calc(100dvh - 96px);
	min-height: 460px;
	max-height: 1100px;
	background: linear-gradient(180deg, var(--tfhb-bg), var(--tfhb-bg-2));
	border: 1px solid var(--tfhb-line);
	border-radius: var(--tfhb-rad);
	overflow: hidden;
}

.tfhb-reader:fullscreen,
.tfhb-reader:-webkit-full-screen {
	height: 100vh;
	height: 100dvh;
	max-height: none;
	border-radius: 0;
	border: 0;
}

.tfhb-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 11px 15px;
	background: rgba(7, 7, 7, .72);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--tfhb-line-2);
	flex: 0 0 auto;
}

.tfhb-bar-l { display: flex; align-items: baseline; gap: 12px; min-width: 0; }

.tfhb-brand-sm {
	font-family: var(--tfhb-display);
	font-weight: 700;
	font-size: 11.5px;
	letter-spacing: .28em;
	color: var(--tfhb-orange);
	flex: 0 0 auto;
}

.tfhb-bar-title {
	font-size: 13px;
	color: var(--tfhb-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.tfhb-bar-r { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; }

.tfhb-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px; height: 34px;
	border-radius: 10px;
	border: 1px solid var(--tfhb-line-2);
	background: rgba(255, 255, 255, .04);
	color: var(--tfhb-text);
	font-size: 17px;
	line-height: 1;
	cursor: pointer;
	transition: border-color .16s, color .16s, background .16s;
}

.tfhb-icon:hover { border-color: var(--tfhb-orange); color: var(--tfhb-orange-2); }
.tfhb-icon:focus-visible { outline: 2px solid var(--tfhb-orange); outline-offset: 2px; }

/* ── Stage ── */

.tfhb-stage {
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
	overflow: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 18px;
	background:
		radial-gradient(760px 420px at 50% 0%, rgba(255, 140, 66, .06), transparent 60%),
		#0a0908;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
}

/*
 * The page is a background-image on a div, deliberately not an <img>:
 * there is no node to drag out, and no "Save image as" entry to reach.
 */
.tfhb-page {
	position: relative;
	flex: 0 0 auto;
	background-color: #fff;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
	border-radius: 4px;
	box-shadow: 0 18px 54px rgba(0, 0, 0, .62);
	transition: width .16s ease, height .16s ease;
}

.tfhb-page-load {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #14110f;
	border-radius: 4px;
	transition: opacity .22s;
}

.tfhb-page-load[hidden] { display: none; }

/* ── Visible watermark ── */

/*
 * This layer is the one the customer notices moving. It is NOT the security
 * control: the authoritative watermark is composited into the JPEG on the server,
 * so removing this node in devtools changes nothing about what a screenshot shows.
 */
.tfhb-wm {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 3;
	opacity: .16;
	mix-blend-mode: difference;
	background-repeat: repeat;
	animation: tfhb-drift 34s linear infinite;
}

.tfhb-wm-text {
	position: absolute;
	left: 50%;
	bottom: 12px;
	transform: translateX(-50%);
	font-size: 10.5px;
	letter-spacing: .09em;
	white-space: nowrap;
	color: #fff;
	opacity: .55;
}

@keyframes tfhb-drift {
	0% { background-position: 0 0; }
	100% { background-position: 420px 420px; }
}

@media (prefers-reduced-motion: reduce) {
	.tfhb-wm { animation: none; }
}

/* ── Page navigation ── */

.tfhb-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 4;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px; height: 62px;
	border: 1px solid var(--tfhb-line-2);
	border-radius: 12px;
	background: rgba(12, 11, 10, .74);
	backdrop-filter: blur(6px);
	color: var(--tfhb-text);
	cursor: pointer;
	transition: opacity .18s, border-color .18s, color .18s;
}

.tfhb-prev { left: 12px; }
.tfhb-next { right: 12px; }
.tfhb-nav:hover { border-color: var(--tfhb-orange); color: var(--tfhb-orange-2); }
.tfhb-nav:focus-visible { outline: 2px solid var(--tfhb-orange); outline-offset: 2px; }
.tfhb-nav[disabled] { opacity: .22; cursor: default; pointer-events: none; }

/* ── Footer ── */

.tfhb-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 15px;
	background: rgba(7, 7, 7, .82);
	border-top: 1px solid var(--tfhb-line-2);
	font-size: 12px;
	color: var(--tfhb-muted-2);
	flex: 0 0 auto;
}

.tfhb-foot-l { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tfhb-foot-l strong { color: var(--tfhb-muted); font-weight: 600; }
.tfhb-foot-r { flex: 0 0 auto; }

.tfhb-pager { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; }

/* Compact page arrows inside the footer pager. The floating arrows over the page
   edges depend on hover and sit outside the thumb's reach on a phone; these are
   always visible and always reachable. */
.tfhb-pgbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px; height: 30px;
	padding: 0;
	border: 1px solid var(--tfhb-line-2);
	border-radius: 8px;
	background: rgba(0, 0, 0, .4);
	color: var(--tfhb-text);
	cursor: pointer;
	transition: border-color .16s, color .16s, background .16s;
	-webkit-tap-highlight-color: transparent;
}
.tfhb-pgbtn:hover:not([disabled]) {
	border-color: var(--tfhb-orange);
	color: var(--tfhb-orange-2);
	background: rgba(255, 140, 66, .08);
}
.tfhb-pgbtn:active:not([disabled]) { transform: translateY(1px); }
.tfhb-pgbtn:focus-visible { outline: 2px solid var(--tfhb-orange); outline-offset: 2px; }
.tfhb-pgbtn[disabled] { opacity: .3; cursor: default; pointer-events: none; }

/* Comfortable touch targets on small screens. */
@media (max-width: 640px) {
	.tfhb-pgbtn { width: 36px; height: 36px; }
}

.tfhb-pageno {
	width: 56px;
	padding: 6px 8px;
	text-align: center;
	background: rgba(0, 0, 0, .4);
	border: 1px solid var(--tfhb-line-2);
	border-radius: 8px;
	color: var(--tfhb-text);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 12.5px;
	-webkit-user-select: text;
	user-select: text;
}

.tfhb-pageno:focus { outline: none; border-color: var(--tfhb-orange); }
.tfhb-of { white-space: nowrap; }

.tfhb-signout { color: var(--tfhb-muted-2); text-decoration: none; }
.tfhb-signout:hover { color: var(--tfhb-orange-2); text-decoration: underline; }

/* ───────────────────────────── Mobile ───────────────────────────── */

@media (max-width: 720px) {
	.tfhb-reader { height: calc(100vh - 60px); height: calc(100dvh - 60px); border-radius: 12px; }
	.tfhb-bar-title { display: none; }
	.tfhb-stage { padding: 10px; }
	.tfhb-nav { width: 36px; height: 54px; }
	.tfhb-prev { left: 6px; }
	.tfhb-next { right: 6px; }
	.tfhb-foot { font-size: 11px; padding: 9px 11px; }
	.tfhb-foot-l { display: none; }
	.tfhb-foot-r { margin-left: auto; }
	.tfhb-gate { padding: 30px 14px 40px; }
	.tfhb-gate-card { padding: 30px 22px 24px; }
	.tfhb-code-input { font-size: 18px; padding: 15px 10px; }
}

/* ───────────────────────────── Print ───────────────────────────── */

/*
 * Copy protection, part 2: blank the document on print and show a notice instead.
 * visibility (not display) is used so the layout does not reflow into something
 * that leaks content on the first printed page.
 */
.tfhb-printblock { display: none; }

@media print {
	html, body { background: #fff !important; }

	body * { visibility: hidden !important; }

	.tfhb-printblock,
	.tfhb-printblock * { visibility: visible !important; }

	.tfhb-printblock {
		display: flex !important;
		position: fixed !important;
		inset: 0 !important;
		align-items: center !important;
		justify-content: center !important;
		text-align: center !important;
		font-family: system-ui, sans-serif !important;
		color: #111 !important;
		background: #fff !important;
	}

	.tfhb-printblock strong { display: block; font-size: 19px; margin-bottom: 8px; }
	.tfhb-printblock p { font-size: 13.5px; color: #555; }
}

/* ── Host-theme chrome ────────────────────────────────────────────────────────
   The reader is a full-screen, self-branded surface: it supplies its own
   Aynexon wordmark, its own title and its own dark ground. Hello Elementor's
   default page template adds a text site-title ("aynexon.com", styled with the
   theme's default link colour), the site tagline, and a duplicate page heading
   above all of it.

   This file is only ever loaded on a page that contains [aynexon_handbook], so
   these rules cannot affect the homepage or any other page. Kept as CSS rather
   than the JS-injected style used elsewhere on the site, so the theme's header
   never paints before it is hidden. */
.tfhb-host-clean .site-branding,
.tfhb-host-clean .site-header__titles,
.tfhb-host-clean .site-header .site-title,
.tfhb-host-clean .site-header .site-description,
.tfhb-host-clean .wp-block-site-title,
.tfhb-host-clean .wp-block-site-tagline,
.tfhb-host-clean .page-header,
.tfhb-host-clean .entry-title{
  display:none !important;
}

/* An emptied header must not leave a band of blank space behind. */
.tfhb-host-clean .site-header:empty,
.tfhb-host-clean .site-header .header-inner:empty{
  display:none !important;
}

/* The theme's page padding fights a full-bleed reader. */
.tfhb-host-clean .site-main,
.tfhb-host-clean .page-content{
  margin:0 !important;
  padding:0 !important;
  max-width:none !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   HOST-THEME DEFENCE, FULL VIEW, SCROLLING AND PANNING
   ════════════════════════════════════════════════════════════════════════════ */

/* ── 1. Winning the cascade against the host theme ──
   Elementor's kit styles bare elements with selectors like
   `.elementor-kit-123 button` (specificity 0,1,1), which outranks a single
   class such as `.tfhb-icon` (0,1,0) -- that is why the toolbar buttons picked
   up the theme's accent colour. Scoping through `.tfhb` lifts these to 0,2,1
   and puts the reader back in control of its own chrome. */
.tfhb button.tfhb-icon,
.tfhb a.tfhb-icon,
.tfhb button.tfhb-nav,
.tfhb button.tfhb-pgbtn {
	background: rgba(255, 255, 255, .04);
	color: var(--tfhb-text);
	border: 1px solid var(--tfhb-line-2);
	box-shadow: none;
	text-shadow: none;
	text-decoration: none;
	font-family: var(--tfhb-body);
	letter-spacing: normal;
	text-transform: none;
	filter: none;
	opacity: 1;
}
.tfhb button.tfhb-nav { background: rgba(12, 11, 10, .74); }

.tfhb button.tfhb-icon:hover,
.tfhb a.tfhb-icon:hover,
.tfhb button.tfhb-nav:hover,
.tfhb button.tfhb-pgbtn:hover {
	border-color: var(--tfhb-orange);
	color: var(--tfhb-orange-2);
	background: rgba(255, 140, 66, .10);
}

/* `fill="none"` and `stroke="currentColor"` in the markup are PRESENTATION
   ATTRIBUTES, which lose to any CSS rule at all. A theme rule as ordinary as
   `svg { fill: currentColor }` therefore floods these outline icons solid and
   they disappear. Restating them as CSS is what actually makes them stick. */
.tfhb .tfhb-icon svg,
.tfhb a.tfhb-icon svg,
.tfhb .tfhb-nav svg,
.tfhb .tfhb-pgbtn svg,
.tfhb .tfhb-back svg {
	fill: none !important;
	stroke: currentColor !important;
	display: block;
	flex: 0 0 auto;
	max-width: none;
	vertical-align: middle;
}

/* Sizes must be stated explicitly, NOT left to `auto`.
   An earlier version of this rule set `width:auto;height:auto`, which overrode
   each icon's own width="15"/height="15" attributes -- presentation attributes
   lose to CSS, the very thing this block exists to exploit -- and every icon
   collapsed to nothing inside its flex button. */
.tfhb .tfhb-icon svg  { width: 15px; height: 15px; }
.tfhb .tfhb-pgbtn svg { width: 15px; height: 15px; }
.tfhb .tfhb-nav svg   { width: 22px; height: 22px; }
.tfhb .tfhb-back svg  { width: 16px; height: 16px; }

/* ── 2. Back to the site ──
   The reader hides the theme header, so this is the only way out.

   Pinned to the top-left of the surface rather than left in the flow: the gate
   centres its card, which pushed a flow-positioned link to the far edge and
   half off-screen. Anchored here it lands in the same spot on every screen.

   Written as `.tfhb a.tfhb-back` (0,2,1) because the host theme styles links
   more specifically than a lone class can answer -- that is what turned it the
   theme's magenta instead of the Aynexon orange. */
.tfhb a.tfhb-back,
.tfhb a.tfhb-back:link,
.tfhb a.tfhb-back:visited {
	position: absolute;
	top: 20px;
	left: 22px;
	z-index: 30;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 9px 15px 9px 12px;
	border: 1px solid var(--tfhb-line);
	border-radius: 100px;
	background: rgba(255, 140, 66, .07);
	color: var(--tfhb-orange-2);
	font-family: var(--tfhb-body);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	box-shadow: none;
	transition: background .16s, border-color .16s, color .16s;
}
.tfhb a.tfhb-back:hover {
	background: rgba(255, 140, 66, .15);
	border-color: var(--tfhb-orange);
	color: var(--tfhb-orange);
}
.tfhb a.tfhb-back:focus-visible { outline: 2px solid var(--tfhb-orange); outline-offset: 3px; }

/* The gate is the positioning context for the pinned link. */
.tfhb-gate { position: relative; }

@media (max-width: 600px) {
	.tfhb a.tfhb-back { top: 12px; left: 12px; padding: 8px 13px 8px 10px; font-size: 13px; }
}

/* ── 3. Full view ──
   The reader was sized `100dvh - 96px` to leave room for the site header and
   footer. On a page where those are hidden that gap is dead space, and the
   surrounding document keeps its own scrollbar, so the wheel scrolls the PAGE
   instead of the handbook. Edge to edge, with the document pinned, gives the
   stage sole ownership of scrolling. */
.tfhb-host-clean,
.tfhb-host-clean body { overflow: hidden !important; height: 100% !important; }

.tfhb-host-clean .tfhb { max-width: none; }

.tfhb-host-clean .tfhb-reader {
	position: fixed;
	inset: 0;
	width: 100vw;
	width: 100dvw;
	height: 100vh;
	height: 100dvh;
	max-height: none;
	min-height: 0;
	border: 0;
	border-radius: 0;
	z-index: 2147483000;
}

/* ── 4. Scrolling a zoomed page ──
   `justify-content:center` + `overflow:auto` is a long-standing trap: content
   overflowing the START edge becomes unreachable, because scrollLeft/scrollTop
   cannot go negative. Half the zoomed page was simply unreachable. Centring
   with `margin:auto` on the child keeps the page centred while it fits AND
   keeps every edge scrollable once it does not. */
.tfhb-stage {
	display: block !important;
	text-align: center;
	overflow: auto !important;
	scrollbar-width: thin;
}
.tfhb-stage > .tfhb-page {
	margin: auto !important;
	display: inline-block;
}

/* ── 5. Hand tool ──
   Drag the page instead of scrolling to it. */
.tfhb-stage.is-pan { cursor: grab; }
.tfhb-stage.is-pan:active,
.tfhb-stage.is-panning { cursor: grabbing; }
.tfhb-stage.is-panning { user-select: none; }
.tfhb button.tfhb-icon.is-on {
	background: rgba(255, 140, 66, .16);
	border-color: var(--tfhb-orange);
	color: var(--tfhb-orange-2);
}

/* ── The `hidden` attribute must actually hide things ──
   `hidden` is honoured only through the user-agent rule `[hidden]{display:none}`.
   Author styles beat user-agent styles, so ANY `display` declaration on the same
   element silently disables it. `.tfhb-spinner` set `display:inline-block`, so
   `spin.hidden = true` after a failed activation set the attribute and changed
   nothing -- the button reset its label to "Open the handbook" but kept spinning
   forever, which read as a hung request.

   Declared once for the whole reader rather than per element, so nothing new can
   reintroduce it. */
.tfhb [hidden],
.tfhb [hidden]:not(:focus):not(:active) { display: none !important; }

/* ── The large floating arrows ──
   These duplicate the footer pager, so they only earn their place where they
   are genuinely faster: a mouse on a wide screen, where the eye is on the middle
   of the page and the footer buttons are a long way off.

   On touch there is no hover, so they would sit permanently on top of the page —
   and once zoomed in they cover the text being read. Swipe and the footer pair
   already cover that case, so they are removed there entirely. */
@media (hover: hover) and (pointer: fine) {
	.tfhb .tfhb-nav {
		opacity: 0;
		transition: opacity .18s, border-color .18s, color .18s;
	}
	.tfhb-stage:hover .tfhb-nav,
	.tfhb .tfhb-nav:focus-visible {
		opacity: 1;
	}
	/* Panning takes precedence: the arrows must not sit under a dragging cursor. */
	.tfhb-stage.is-panning .tfhb-nav { opacity: 0; }
}

@media (hover: none), (pointer: coarse) {
	.tfhb .tfhb-nav { display: none; }
}

/* A disabled arrow stays invisible rather than fading in greyed out. */
.tfhb .tfhb-nav[disabled] { opacity: 0 !important; }

/* ── Back control in the reader's top bar ──
   An <a> styled as one of the toolbar icons, so it reads as part of the same
   set. Given its own accent so the way out is findable at a glance without
   competing with the page controls on the right. */
.tfhb a.tfhb-bar-back {
	flex: 0 0 auto;
	margin-right: 4px;
	border-color: var(--tfhb-line);
	background: rgba(255, 140, 66, .08);
	color: var(--tfhb-orange-2);
	text-decoration: none;
}
.tfhb a.tfhb-bar-back:hover {
	background: rgba(255, 140, 66, .18);
	border-color: var(--tfhb-orange);
	color: var(--tfhb-orange);
}
.tfhb-bar-l { gap: 10px; align-items: center; }

/* On a narrow screen the wordmark goes before the way out does. */
@media (max-width: 560px) {
	.tfhb .tfhb-brand-sm { display: none; }
}