/* TK Post Templates — 3 selectable looks for lesson single-post pages.
   View 1 = plain tk-dark (no attribute, nothing here applies).
   View 2 = "liquid glass"  html[data-tk-view="2"] — one continuous pane.
   View 3 = "dense glass"   html[data-tk-view="3"] — same glass, elements
            packed tight (touching) with the text title sections removed.
   All rules ride on top of dark-post.css and must out-rank its !important
   wrapper paints, hence the html[data-tk-view] prefix + !important. */

/* ══════════════════ Switcher row (inside the "..." menu) ══════════════════ */

/* Stacked, not side-by-side: the bilingual label is long enough to wrap to
   four lines in the narrow panel, which crushed the buttons into a corner.
   Label on its own row, buttons full-width beneath it (bigger tap targets
   for tablets), "apply to all" under those. */
#tk-view-row {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 8px;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	padding: 10px;
	margin: 0 0 8px;
	font-size: 12px;
	font-weight: 600;
	color: #4d4d4d;
}
#lesson-downloader-panel.theme-dark #tk-view-row {
	border-color: #333;
	color: #ececec;
}
#tk-view-row .tk-view-row-label {
	display: block;
	line-height: 1.3;
	opacity: .85;
}
#tk-view-row .tk-view-row-btns {
	display: flex;
	gap: 6px;
}
#tk-view-row .tk-view-row-btns button {
	-webkit-appearance: none;
	appearance: none;
	flex: 1 1 0;
	min-width: 0;
	height: 36px;
	border-radius: 7px;
	border: 1px solid #cfcfcf;
	background: transparent;
	color: inherit;
	font: 600 14px/1 inherit;
	cursor: pointer;
	padding: 0;
	touch-action: manipulation;
}
#lesson-downloader-panel.theme-dark #tk-view-row .tk-view-row-btns button {
	border-color: #444;
}
#tk-view-row .tk-view-row-btns button.is-active {
	background: #c9a14a;
	border-color: #c9a14a;
	color: #1a1206;
}
#tk-view-row .tk-view-row-all {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.25;
	cursor: pointer;
	touch-action: manipulation;
}
#tk-view-row .tk-view-row-all input {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: #c9a14a;
	cursor: pointer;
}

/* ══════════════════ Shared glass base (views 2 + 3) ══════════════════
   Ambient gradient behind everything; one continuous frosted pane. */

html[data-tk-view="2"],
html[data-tk-view="3"],
html[data-tk-view="2"] body.tk-dark,
html[data-tk-view="3"] body.tk-dark {
	background:
		radial-gradient(1200px 700px at 12% -8%, rgba(163, 26, 31, 0.35), transparent 60%),
		radial-gradient(1000px 700px at 95% 8%, rgba(201, 161, 74, 0.22), transparent 55%),
		radial-gradient(900px 900px at 50% 115%, rgba(58, 90, 160, 0.28), transparent 60%),
		linear-gradient(180deg, #0b0812 0%, #120a1c 55%, #0a0710 100%) !important;
	background-attachment: fixed !important;
}

/* Let the gradient shine through every Astra wrapper dark-post painted. */
html[data-tk-view="2"] body.tk-dark .site,
html[data-tk-view="2"] body.tk-dark #page,
html[data-tk-view="2"] body.tk-dark .hfeed,
html[data-tk-view="2"] body.tk-dark .ast-container,
html[data-tk-view="2"] body.tk-dark .ast-row,
html[data-tk-view="2"] body.tk-dark .ast-grid-common-col,
html[data-tk-view="2"] body.tk-dark .site-content,
html[data-tk-view="2"] body.tk-dark #content,
html[data-tk-view="2"] body.tk-dark main,
html[data-tk-view="2"] body.tk-dark #primary,
html[data-tk-view="2"] body.tk-dark .ast-content,
html[data-tk-view="3"] body.tk-dark .site,
html[data-tk-view="3"] body.tk-dark #page,
html[data-tk-view="3"] body.tk-dark .hfeed,
html[data-tk-view="3"] body.tk-dark .ast-container,
html[data-tk-view="3"] body.tk-dark .ast-row,
html[data-tk-view="3"] body.tk-dark .ast-grid-common-col,
html[data-tk-view="3"] body.tk-dark .site-content,
html[data-tk-view="3"] body.tk-dark #content,
html[data-tk-view="3"] body.tk-dark main,
html[data-tk-view="3"] body.tk-dark #primary,
html[data-tk-view="3"] body.tk-dark .ast-content {
	background: transparent !important;
}

/* Header + footer become glass strips */
html[data-tk-view="2"] body.tk-dark .site-header,
html[data-tk-view="2"] body.tk-dark #masthead,
html[data-tk-view="2"] body.tk-dark .ast-primary-header-bar,
html[data-tk-view="2"] body.tk-dark .ast-builder-grid-row,
html[data-tk-view="3"] body.tk-dark .site-header,
html[data-tk-view="3"] body.tk-dark #masthead,
html[data-tk-view="3"] body.tk-dark .ast-primary-header-bar,
html[data-tk-view="3"] body.tk-dark .ast-builder-grid-row {
	background: rgba(18, 12, 26, 0.45) !important;
	-webkit-backdrop-filter: blur(18px) saturate(1.3);
	backdrop-filter: blur(18px) saturate(1.3);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
html[data-tk-view="2"] body.tk-dark .site-footer,
html[data-tk-view="2"] body.tk-dark #colophon,
html[data-tk-view="2"] body.tk-dark .ast-builder-footer-grid-row,
html[data-tk-view="2"] body.tk-dark .ast-builder-footer-grid-row-container,
html[data-tk-view="2"] body.tk-dark .ast-builder-footer-grid-row-container-inner,
html[data-tk-view="2"] body.tk-dark .site-below-footer-wrap,
html[data-tk-view="2"] body.tk-dark .footer-widget-area,
html[data-tk-view="2"] body.tk-dark .site-footer-section,
html[data-tk-view="3"] body.tk-dark .site-footer,
html[data-tk-view="3"] body.tk-dark #colophon,
html[data-tk-view="3"] body.tk-dark .ast-builder-footer-grid-row,
html[data-tk-view="3"] body.tk-dark .ast-builder-footer-grid-row-container,
html[data-tk-view="3"] body.tk-dark .ast-builder-footer-grid-row-container-inner,
html[data-tk-view="3"] body.tk-dark .site-below-footer-wrap,
html[data-tk-view="3"] body.tk-dark .footer-widget-area,
html[data-tk-view="3"] body.tk-dark .site-footer-section {
	background: rgba(14, 10, 20, 0.45) !important;
	-webkit-backdrop-filter: blur(18px);
	backdrop-filter: blur(18px);
	border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* ONE continuous glass pane — the whole article (title + content + media)
   sits together on a single seamless frosted surface. */
html[data-tk-view="2"] body.tk-dark .ast-article-single,
html[data-tk-view="3"] body.tk-dark .ast-article-single {
	background: rgba(255, 255, 255, 0.055) !important;
	-webkit-backdrop-filter: blur(26px) saturate(1.4);
	backdrop-filter: blur(26px) saturate(1.4);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-top-color: rgba(255, 255, 255, 0.22);
	border-radius: 26px;
	max-width: 1100px;
	margin: 22px auto !important;
	padding: 26px 30px 34px !important;
	box-shadow:
		0 24px 70px rgba(0, 0, 0, 0.55),
		inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

/* Content stays transparent — same pane, no nested boxes */
html[data-tk-view="2"] body.tk-dark .entry-content,
html[data-tk-view="3"] body.tk-dark .entry-content {
	background: transparent !important;
	padding: 0 !important;
	border: 0;
	box-shadow: none;
	line-height: 1.75;
}

/* Media sits flush IN the glass — consistent radius, hairline edge. */
html[data-tk-view="2"] body.tk-dark .entry-content .tk-media,
html[data-tk-view="2"] body.tk-dark .entry-content .wp-block-image img,
html[data-tk-view="2"] body.tk-dark .entry-content .wp-block-video video,
html[data-tk-view="3"] body.tk-dark .entry-content .tk-media,
html[data-tk-view="3"] body.tk-dark .entry-content .wp-block-image img,
html[data-tk-view="3"] body.tk-dark .entry-content .wp-block-video video {
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
}

/* Teacher-guide frame collapses into the single pane — no double box */
@media (min-width: 768px) {
	html[data-tk-view="2"] body.tk-teacher-guide .entry-content,
	html[data-tk-view="3"] body.tk-teacher-guide .entry-content {
		max-width: none;
		margin: 0;
		padding: 0 !important;
		border: 0;
		background: transparent !important;
		box-shadow: none;
	}
}

@media (max-width: 767px) {
	html[data-tk-view="2"] body.tk-dark .ast-article-single,
	html[data-tk-view="3"] body.tk-dark .ast-article-single {
		margin: 12px 10px !important;
		padding: 18px 16px 24px !important;
		border-radius: 18px;
	}
}

/* Fallback: no backdrop-filter support → solid translucent surfaces */
@supports not (backdrop-filter: blur(1px)) {
	html[data-tk-view="2"] body.tk-dark .ast-article-single,
	html[data-tk-view="3"] body.tk-dark .ast-article-single { background: rgba(28, 20, 38, 0.92) !important; }
	html[data-tk-view="2"] body.tk-dark .site-header,
	html[data-tk-view="2"] body.tk-dark #masthead,
	html[data-tk-view="3"] body.tk-dark .site-header,
	html[data-tk-view="3"] body.tk-dark #masthead { background: rgba(18, 12, 26, 0.95) !important; }
}

/* ══════════════════ View 2 only — dense glass ══════════════════
   No title sections; media and blocks pack together inside the pane. */

/* Remove the text title sections (post title + section headings) */
html[data-tk-view="2"] body.tk-dark .entry-title,
html[data-tk-view="2"] body.tk-dark .entry-content h1,
html[data-tk-view="2"] body.tk-dark .entry-content h2,
html[data-tk-view="2"] body.tk-dark .entry-content h3,
html[data-tk-view="2"] body.tk-dark .entry-content h4 {
	display: none !important;
}

/* Everything touches — collapse the vertical rhythm to a hairline gap */
html[data-tk-view="2"] body.tk-dark .entry-content > * {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}
html[data-tk-view="2"] body.tk-dark .entry-content > * + * { margin-top: 4px !important; }

/* Column wrappers ship 48px vertical padding — squash it so media rows touch */
html[data-tk-view="2"] body.tk-dark .entry-content .wp-block-columns {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

/* Empty paragraphs / spacers between blocks vanish entirely */
html[data-tk-view="2"] body.tk-dark .entry-content > p:empty,
html[data-tk-view="2"] body.tk-dark .entry-content .wp-block-spacer {
	display: none !important;
}

/* Tighter pane padding so the media wall dominates */
html[data-tk-view="2"] body.tk-dark .ast-article-single {
	padding: 14px 14px 18px !important;
}

/* ══════════════════ View 3 only — full-bleed mosaic ══════════════════
   EVERY element on the page touches — left menu included. The layout
   stretches edge-to-edge to fill the screen, gutters and pane chrome
   collapse to zero, and a slim strip stays clear at the top for the
   "..." menu / lock handle. */

/* Reserve the top strip for the floating menu controls */
html[data-tk-view="3"] body.tk-dark #content {
	padding-top: 48px !important;
}

/* Page fills edge-to-edge: no container gutters, no column gap */
html[data-tk-view="3"] body.tk-dark .ast-container {
	max-width: 100% !important;
	width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	column-gap: 0 !important;
	gap: 0 !important;
}
html[data-tk-view="3"] body.tk-dark #primary,
html[data-tk-view="3"] body.tk-dark #secondary,
html[data-tk-view="3"] body.tk-dark .widget-area.secondary {
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
}

/* Article pane loses all chrome — flush with the sidebar and screen edges */
html[data-tk-view="3"] body.tk-dark .ast-article-single {
	max-width: none;
	margin: 0 !important;
	padding: 0 !important;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

/* Left menu tiles touch too (top gap for view 3 handled by sticky-sidebar.js) */
html[data-tk-view="3"] body.tk-dark .widget-area.secondary .sidebar-main {
	padding: 0 !important;
}
html[data-tk-view="3"] body.tk-dark .sidebar-main .widget {
	margin: 0 0 2px !important;
	padding: 0 !important;
}

/* No title sections */
html[data-tk-view="3"] body.tk-dark .entry-title,
html[data-tk-view="3"] body.tk-dark .entry-content h1,
html[data-tk-view="3"] body.tk-dark .entry-content h2,
html[data-tk-view="3"] body.tk-dark .entry-content h3,
html[data-tk-view="3"] body.tk-dark .entry-content h4 {
	display: none !important;
}

/* Blocks tile flush — hairline 2px seams, spacers gone */
html[data-tk-view="3"] body.tk-dark .entry-content > * {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}
html[data-tk-view="3"] body.tk-dark .entry-content > * + * { margin-top: 2px !important; }
html[data-tk-view="3"] body.tk-dark .entry-content .wp-block-columns {
	padding: 0 !important;
	gap: 2px !important;
	margin: 0 !important;
}
html[data-tk-view="3"] body.tk-dark .entry-content > p:empty,
html[data-tk-view="3"] body.tk-dark .entry-content .wp-block-spacer {
	display: none !important;
}

/* Media scales to fill its cell, square corners so tiles truly touch */
html[data-tk-view="3"] body.tk-dark .entry-content .tk-media,
html[data-tk-view="3"] body.tk-dark .sidebar-main .tk-media,
html[data-tk-view="3"] body.tk-dark .entry-content .wp-block-image img,
html[data-tk-view="3"] body.tk-dark .entry-content .wp-block-video video {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	border-radius: 0 !important;
	box-shadow: none;
}

/* Body text keeps a little breathing room so words don't hit the bezel */
html[data-tk-view="3"] body.tk-dark .entry-content > p,
html[data-tk-view="3"] body.tk-dark .entry-content > ul,
html[data-tk-view="3"] body.tk-dark .entry-content > ol {
	padding: 6px 12px;
}