/* Hierarchical Content theme stylesheet. Modest study-portal styling:
   card grids, a sidebar tree, badges, and a clear question/answer
   presentation for chapters. Not a design system -- a few hours of
   competent theme-dev CSS. */

:root {
	--hct-bg: #f6f8fb;
	--hct-surface: #ffffff;
	--hct-text: #1e293b;
	--hct-text-strong: #0f172a;
	--hct-text-muted: #64748b;
	--hct-primary: #2563eb;
	--hct-primary-dark: #1d4ed8;
	--hct-primary-light: #eff6ff;
	--hct-border: #e2e8f0;
	--hct-success: #059669;
	--hct-success-light: #ecfdf5;
	--hct-success-border: #a7f3d0;
	--hct-warning: #b45309;
	--hct-warning-light: #fffbeb;
	--hct-warning-border: #fde68a;
	--hct-danger: #991b1b;
	--hct-danger-border: #fecaca;
	--hct-radius: 8px;
	--hct-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.08);
	/* Question star ratings (assets/js/question-ratings.js). #ccc-style
	   "unfilled" gray needs its own dark-mode value, same confirmed lesson
	   as cpt-kagga-vachana's own star-rating fix elsewhere in this project
	   -- a light-contrast gray chosen against a white card nearly
	   disappears against a dark one, so this gets its own token pair
	   rather than a hardcoded color repeated in both --hct-star-unfilled
	   rules below. */
	--hct-star-gold: #d4a017;
	--hct-star-unfilled: #cbd5e1;
}

/* ---------------- Dark mode ----------------
   Every color in this file already flows through a --hct-* custom
   property, so dark mode is just redefining those tokens in two places
   -- no per-component dark-mode rule needed anywhere else in this file.
   Two blocks, mirroring the live "wikipress" theme's own lumina.css
   pattern exactly:
   1. @media (prefers-color-scheme: dark), guarded :not([data-theme="light"])
      -- follows the OS/browser's own dark-mode setting UNLESS the visitor
      has explicitly picked "light" via the toggle (assets/js/theme-toggle.js).
   2. :root[data-theme="dark"] -- an explicit manual choice, which must win
      even on a light-OS browser (the media query alone would never match
      there), so the same values are repeated as a plain attribute selector
      with no @media condition. */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--hct-bg: #0f172a;
		--hct-surface: #1e293b;
		--hct-text: #e2e8f0;
		--hct-text-strong: #f8fafc;
		--hct-text-muted: #94a3b8;
		--hct-primary: #60a5fa;
		--hct-primary-dark: #93c5fd;
		--hct-primary-light: #1e3a5f;
		--hct-border: #334155;
		--hct-success: #34d399;
		--hct-success-light: #064e3b;
		--hct-success-border: #059669;
		--hct-warning: #fbbf24;
		--hct-warning-light: #451a03;
		--hct-warning-border: #92400e;
		--hct-danger: #f87171;
		--hct-danger-border: #7f1d1d;
		--hct-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.4);
		--hct-star-gold: #f5c34d;
		--hct-star-unfilled: #475569;
	}
	/* .hct-badge--* below use their own small hardcoded pastel palette
	   (not the shared --hct-* tokens), one per taxonomy type -- pastel
	   background + dark text reads fine on a light page but becomes a
	   glaring, washed-out patch against a dark one, so each gets its own
	   dark-mode pair here rather than being left on the light-only values. */
	:root:not([data-theme="light"]) .hct-badge--hc_grade { background: #1e3a5f; color: #93c5fd; border-color: #2563eb; }
	:root:not([data-theme="light"]) .hct-badge--hc_subject { background: #2e1065; color: #c4b5fd; border-color: #6d28d9; }
	:root:not([data-theme="light"]) .hct-badge--hc_topic { background: #052e16; color: #86efac; border-color: #15803d; }
	:root:not([data-theme="light"]) .hct-badge--pc_doc_type { background: #431407; color: #fdba74; border-color: #c2410c; }
}
:root[data-theme="dark"] {
	--hct-bg: #0f172a;
	--hct-surface: #1e293b;
	--hct-text: #e2e8f0;
	--hct-text-strong: #f8fafc;
	--hct-text-muted: #94a3b8;
	--hct-primary: #60a5fa;
	--hct-primary-dark: #93c5fd;
	--hct-primary-light: #1e3a5f;
	--hct-border: #334155;
	--hct-success: #34d399;
	--hct-success-light: #064e3b;
	--hct-success-border: #059669;
	--hct-warning: #fbbf24;
	--hct-warning-light: #451a03;
	--hct-warning-border: #92400e;
	--hct-danger: #f87171;
	--hct-danger-border: #7f1d1d;
	--hct-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.4);
	--hct-star-gold: #f5c34d;
	--hct-star-unfilled: #475569;
}
:root[data-theme="dark"] .hct-badge--hc_grade { background: #1e3a5f; color: #93c5fd; border-color: #2563eb; }
:root[data-theme="dark"] .hct-badge--hc_subject { background: #2e1065; color: #c4b5fd; border-color: #6d28d9; }
:root[data-theme="dark"] .hct-badge--hc_topic { background: #052e16; color: #86efac; border-color: #15803d; }
:root[data-theme="dark"] .hct-badge--pc_doc_type { background: #431407; color: #fdba74; border-color: #c2410c; }

* { box-sizing: border-box; }

body.hct-body,
body {
	margin: 0;
	background: var(--hct-bg);
	color: var(--hct-text);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	line-height: 1.6;
}

a { color: var(--hct-primary); text-decoration: none; }
a:hover { color: var(--hct-primary-dark); text-decoration: underline; }

img { max-width: 100%; height: auto; }

.hct-page { display: flex; flex-direction: column; min-height: 100vh; }

/* ---------------- Header ---------------- */

.hct-site-header {
	background: var(--hct-surface);
	border-bottom: 1px solid var(--hct-border);
	position: sticky;
	top: 0;
	z-index: 20;
}

.hct-site-header-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 14px 20px;
	display: flex;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
}

.hct-site-title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--hct-text-strong);
}
.hct-site-title:hover { text-decoration: none; color: var(--hct-primary); }
.hct-site-title-icon { font-size: 1.3rem; }

.hct-primary-nav { flex: 1; }
.hct-nav-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 18px;
	flex-wrap: wrap;
}
.hct-nav-menu a {
	color: var(--hct-text);
	font-weight: 500;
	font-size: 0.95rem;
}
.hct-nav-menu a:hover { color: var(--hct-primary); text-decoration: none; }

.hct-header-account {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 0.9rem;
}
.hct-header-user { font-weight: 600; color: var(--hct-text-strong); }
.hct-header-link {
	padding: 6px 12px;
	border: 1px solid var(--hct-border);
	border-radius: 6px;
	color: var(--hct-text);
}
.hct-header-link:hover { background: var(--hct-primary-light); border-color: var(--hct-primary); text-decoration: none; }

/* Mobile hamburger + collapsible nav/account row -- hidden entirely on
   desktop (nav and account controls stay inline as before); on a narrow
   screen the header previously had NO responsive handling at all beyond
   a bare flex-wrap, so the title, every nav link, and every account
   button (Show Sidebar / Dark Mode / user name / Dashboard / Log out)
   just wrapped onto however many lines they needed, in whatever order --
   a real, confirmed clutter bug on mobile. Collapsed behind one
   hamburger toggle instead, matching the standard responsive-header
   pattern. */
.hct-mobile-menu-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 1px solid var(--hct-border);
	border-radius: 6px;
	background: var(--hct-surface);
	color: var(--hct-text);
	font-size: 1.1rem;
	cursor: pointer;
}
.hct-mobile-menu-toggle:hover { background: var(--hct-primary-light); border-color: var(--hct-primary); }

/* Mobile-only utility row (theme toggle + hamburger, side by side) --
   hidden entirely on desktop, where .hct-header-account's own inline
   theme toggle is used instead (see .hct-desktop-only-control below). */
.hct-mobile-utility-row {
	display: none;
	align-items: center;
	gap: 8px;
	margin-left: auto;
}
.hct-mobile-utility-row .hct-theme-toggle {
	width: 36px;
	height: 36px;
	padding: 0;
	justify-content: center;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

@media (max-width: 780px) {
	.hct-site-header-inner { flex-wrap: nowrap; }
	.hct-mobile-utility-row { display: flex; }
	.hct-mobile-menu-toggle { display: flex; }
	/* !important needed here: .hct-sidebar-toggle-btn's own unconditional
	   `display: inline-flex` rule lives later in this file (outside any
	   media query) and would otherwise win this display tie on source
	   order alone, undoing the mobile hide for both the "Hide Sidebar"
	   button and the desktop-only theme toggle (both carry that class). */
	.hct-desktop-only-control { display: none !important; }

	/* Visible-by-default, cleanly STACKED (not the old flex-wrap free-for-
	   all) even with no JS at all -- a real nav must never depend on JS to
	   be reachable. assets/js/mobile-menu.js only adds the collapse/expand
	   INTERACTION on top of this (via body.hct-js's opposite rule below),
	   so a JS failure degrades to "always expanded" rather than "menu
	   permanently invisible", which a `display:none`-by-default approach
	   would have caused. */
	.hct-header-collapsible {
		display: flex;
		flex-basis: 100%;
		flex-direction: column;
		gap: 10px;
		padding: 10px 0 4px;
		border-top: 1px solid var(--hct-border);
		margin-top: 12px;
	}
	.hct-primary-nav { flex: none; }
	.hct-nav-menu { flex-direction: column; gap: 8px; }

	/* Account row on mobile, now that "Hide Sidebar" and "Dark Mode" no
	   longer render here (see .hct-desktop-only-control above) -- what's
	   left is just the logged-in identity + Dashboard/Log out (or a bare
	   Log in link when signed out), which fits as one compact row instead
	   of wrapping across several lines of separately-bordered buttons.
	   Un-bordered, tightly-spaced links match the standard "secondary
	   account row below the main nav" pattern instead of looking like
	   more primary actions than the nav links above them. */
	.hct-header-account {
		flex-wrap: wrap;
		gap: 10px;
		padding-top: 10px;
		border-top: 1px solid var(--hct-border);
		font-size: 0.85rem;
	}
	.hct-header-account .hct-header-link {
		padding: 4px 0;
		border: none;
	}
	.hct-header-account .hct-header-link:hover { background: none; text-decoration: underline; }

	/* Once JS confirms it's running (body.hct-js, set immediately by
	   mobile-menu.js), the collapsible starts CLOSED and the hamburger
	   becomes meaningful; without that class the block above always wins
	   and the menu just stays open, matching the no-JS guarantee above. */
	body.hct-js .hct-header-collapsible { display: none; }
	body.hct-js .hct-header-collapsible.hct-header-collapsible--open { display: flex; }
}

/* ---------------- Layout ---------------- */

.hct-layout { flex: 1; }

.hct-content-area {
	max-width: 1200px;
	margin: 0 auto;
	padding: 28px 20px 60px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 280px;
	gap: 28px;
	align-items: start;
}

.hct-main { min-width: 0; }

@media (max-width: 860px) {
	.hct-content-area { grid-template-columns: 1fr; }
}

/* Sidebar toggle -- lets the reader collapse the sidebar so the main
   content (chapter/lesson-plan/workbook body, often image-heavy) can use
   the full page width instead of being squeezed into ~1200px-280px. The
   .hct-sidebar-collapsed class is added to <body> by
   assets/js/sidebar-toggle.js; when present, the grid drops its second
   column entirely (not just visually hidden -- display:none on the
   sidebar itself frees the width rather than leaving an empty column)
   and .hct-content-area's own max-width is lifted so "full screen"
   actually means full screen, not just "full width of the same
   1200px-capped container". The preference is remembered per-browser via
   localStorage (assets/js/sidebar-toggle.js) so it persists across page
   loads -- a per-viewer convenience, not data that needs to sync
   anywhere else. */
body.hct-sidebar-collapsed .hct-content-area {
	grid-template-columns: 1fr;
	max-width: 100%;
	padding-left: 32px;
	padding-right: 32px;
}
body.hct-sidebar-collapsed .hct-sidebar { display: none; }

.hct-sidebar-toggle-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border: 1px solid var(--hct-border);
	border-radius: 6px;
	background: var(--hct-surface);
	color: var(--hct-text);
	font-size: 0.85rem;
	font-weight: 500;
	cursor: pointer;
}
.hct-sidebar-toggle-btn:hover { background: var(--hct-primary-light); border-color: var(--hct-primary); }

/* Mobile sidebar bar -- on narrow screens the Grade/Subject/Topic tree is
   long (nested details, many chapters) and previously sat in normal
   document flow AFTER the full chapter/lesson body, forcing a reader to
   scroll past everything just to reach it, with its "Hide Sidebar" control
   buried inside the hamburger menu besides. assets/js/sidebar-toggle.js
   inserts this bar as the very first thing inside .hct-content-area (before
   .hct-main) on narrow screens only, giving one always-reachable tap target
   at the top of the page instead. Hidden entirely on wider screens, where
   the header's own "Hide Sidebar" button already does this job inline. */
.hct-mobile-sidebar-bar { display: none; }

@media (max-width: 860px) {
	/* Sidebar itself defaults to hidden on mobile (a separate, mobile-only
	   localStorage preference from the desktop one -- see sidebar-toggle.js)
	   so first paint doesn't dump the whole nested tree above/below the
	   article body. body.hct-sidebar-expanded-mobile is the opt-in shown
	   state, toggled from .hct-mobile-sidebar-bar below. */
	.hct-sidebar { display: none; }
	body.hct-sidebar-expanded-mobile .hct-sidebar { display: block; }

	.hct-mobile-sidebar-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		padding: 10px 14px;
		margin-bottom: 16px;
		background: var(--hct-surface);
		border: 1px solid var(--hct-border);
		border-radius: var(--hct-radius);
		box-shadow: var(--hct-shadow);
	}
	.hct-mobile-sidebar-bar-btn {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		padding: 8px 10px;
		border: none;
		background: none;
		color: var(--hct-text-strong);
		font-size: 0.92rem;
		font-weight: 600;
		cursor: pointer;
		width: 100%;
		text-align: left;
	}
	.hct-mobile-sidebar-bar-icon { font-size: 1.1rem; }
	.hct-mobile-sidebar-bar-chevron {
		margin-left: auto;
		transition: transform 0.15s ease;
		color: var(--hct-text-muted);
	}
	body.hct-sidebar-expanded-mobile .hct-mobile-sidebar-bar-chevron { transform: rotate(180deg); }

	/* When the sidebar is shown on mobile, it's no longer a grid column --
	   it renders as a full-width block directly under the toggle bar,
	   ordered first via the JS move (see sidebar-toggle.js), still capped
	   to a scrollable max-height so an especially long tree doesn't itself
	   become a wall the reader has to scroll through to reach the article. */
	body.hct-sidebar-expanded-mobile .hct-sidebar {
		margin-bottom: 16px;
		max-height: 70vh;
		overflow-y: auto;
	}
}

/* ---------------- Sidebar ---------------- */

/* Capped to the viewport height (minus the sticky top offset and a bottom
   breathing margin) with its own internal scrollbar -- same fix already
   applied to the mobile expanded sidebar above (see the 70vh rule in the
   mobile media query), now applied to the desktop sticky sidebar too. Without
   this, a long expanded tree (e.g. Stay Smart's 188 flat sentence entries)
   grows taller than the viewport and the reader has to scroll the WHOLE PAGE
   down just to reach the rest of the sidebar or get back to the search box /
   grade list above it -- the sidebar's own scrollbar keeps the tree
   navigable without moving the main article at all. */
.hct-sidebar {
	background: var(--hct-surface);
	border: 1px solid var(--hct-border);
	border-radius: var(--hct-radius);
	padding: 18px;
	position: sticky;
	top: 76px;
	max-height: calc(100vh - 76px - 24px);
	overflow-y: auto;
}

.hct-sidebar-section + .hct-sidebar-section {
	margin-top: 20px;
	padding-top: 18px;
	border-top: 1px solid var(--hct-border);
}

.hct-sidebar-heading {
	margin: 0 0 10px;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--hct-text-muted);
}

/* ---------------- Search form ---------------- */

.hct-search-form {
	display: flex;
	gap: 8px;
}

.hct-search-input {
	flex: 1;
	min-width: 0;
	padding: 8px 12px;
	border: 1px solid var(--hct-border);
	border-radius: 6px;
	background: var(--hct-surface);
	color: var(--hct-text-strong);
	font-size: 0.9rem;
}

.hct-search-input:focus {
	outline: none;
	border-color: var(--hct-primary);
}

.hct-search-submit {
	padding: 8px 14px;
	border: 1px solid var(--hct-primary);
	border-radius: 6px;
	background: var(--hct-primary);
	color: #fff;
	font-size: 0.85rem;
	font-weight: 600;
	cursor: pointer;
}

.hct-search-submit:hover {
	filter: brightness(0.95);
}

.hct-sidebar-list,
.hct-sidebar-tree,
.hct-sidebar-tree-subjects {
	list-style: none;
	margin: 0;
	padding: 0;
}

.hct-sidebar-list li { margin-bottom: 6px; }
.hct-sidebar-list a { font-size: 0.92rem; }

.hct-sidebar-tree-grade { margin-bottom: 4px; }
.hct-sidebar-tree-grade > a {
	font-weight: 700;
	color: var(--hct-text-strong);
	font-size: 0.95rem;
}

/* Collapsible grade nodes -- a grade with subjects renders as a native
   <details>/<summary> instead of an always-expanded list, so the sidebar
   scales as more grades/subjects are added instead of showing everything
   open at once. A grade with NO subjects (nothing to expand) stays a
   plain link, matching the else-branch in sidebar.php -- no empty
   disclosure triangle with nothing underneath it. */
.hct-sidebar-tree-details { margin-bottom: 2px; }
.hct-sidebar-tree-details summary {
	display: flex;
	align-items: center;
	gap: 4px;
	cursor: pointer;
	list-style: none;
	padding: 4px 0;
}
.hct-sidebar-tree-details summary::-webkit-details-marker { display: none; }
.hct-sidebar-tree-details summary::before {
	content: '\25B8'; /* ▸ */
	display: inline-block;
	font-size: 0.7rem;
	color: var(--hct-text-muted);
	transition: transform 0.12s ease;
	flex-shrink: 0;
}
.hct-sidebar-tree-details[open] > summary::before { transform: rotate(90deg); }
.hct-sidebar-tree-details summary a {
	font-weight: 700;
	color: var(--hct-text-strong);
	font-size: 0.95rem;
}
/* Clicking the grade name should navigate, not just toggle the disclosure
   -- summary's own click already toggles open/closed by default, so the
   link needs stopPropagation (assets/js/study-mode.js has no role here;
   see the inline handler below) or it would both navigate AND toggle,
   which is harmless but can feel like a double-action. Simpler fix: let
   clicking the label area toggle (native <summary> behavior) and clicking
   the link text navigate -- browsers already treat a nested <a> as a
   distinct hit target from the rest of <summary>, so no JS is actually
   needed here; this comment exists only to document that this was
   verified, not assumed. */

.hct-sidebar-tree-subjects {
	margin: 4px 0 8px;
	padding-left: 18px;
	border-left: 2px solid var(--hct-border);
}
.hct-sidebar-tree-subjects > li { margin-bottom: 4px; }
.hct-sidebar-tree-subjects > li > a,
.hct-sidebar-tree-subjects > li > details > summary { font-size: 0.88rem; color: var(--hct-text); }

/* Third nesting level (Topic), same collapsible <details> pattern as the
   grade level (.hct-sidebar-tree-details is reused as-is, not duplicated
   into a third class), one more indent step + border-left so the tree
   reads as Grade > Subject > Topic at a glance. A subject with no topics
   at all (e.g. Diagramming Sentences' "subjects", which are flat on the
   live site with no Topic level beneath them) renders as a plain link via
   the identical "no children -> plain link, no empty triangle" rule
   sidebar.php already applies at the grade level. */
.hct-sidebar-tree-topics {
	list-style: none;
	margin: 4px 0 6px;
	padding-left: 16px;
	border-left: 2px solid var(--hct-border);
}
.hct-sidebar-tree-topics li { margin-bottom: 3px; }
.hct-sidebar-tree-topics a { font-size: 0.82rem; color: var(--hct-text-muted); }
.hct-sidebar-tree-topics a:hover { color: var(--hct-primary); }

/* Fourth nesting level (the actual Chapter/Lesson Plan/Workbook items
   filed under one Topic) -- same collapsible-tree visual language one
   more indent step in, smaller/lighter text since this is the most
   granular, least-scanned level of the tree. A topic with only one
   matching item still renders as a real Chapter/Lesson Plan/Workbook
   link here (never collapsed back to a plain topic-name link) so the
   label always tells a visitor exactly what kind of content they're
   about to open. */
.hct-sidebar-tree-items {
	list-style: none;
	margin: 3px 0 5px;
	padding-left: 14px;
	border-left: 2px solid var(--hct-border);
}
.hct-sidebar-tree-items li { margin-bottom: 2px; }
.hct-sidebar-tree-items a { font-size: 0.78rem; color: var(--hct-text-muted); }
.hct-sidebar-tree-items a:hover { color: var(--hct-primary); }

/* One color per content type (Chapter/Lesson Plan/Workbook) so a
   visitor can tell them apart at a glance without reading every label --
   same pastel-badge palette already used for the hc_grade/hc_subject/
   hc_topic taxonomy badges elsewhere on this theme (blue/purple/orange),
   skipping the green used for hc_topic badges so the two don't get
   visually confused sitting one level apart in the same tree. A small
   colored square (::before) carries the color instead of the link text
   itself, so the link's own hover/visited states stay legible and the
   color reads as a category marker, not as the only way to identify
   which link is which (the "Label: Title" text is always present too). */
.hct-sidebar-tree-item { display: inline-flex; align-items: center; gap: 5px; }
.hct-sidebar-tree-item::before {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 2px;
	flex: 0 0 auto;
}
.hct-sidebar-tree-item--questions::before { background: var(--hct-primary); }
.hct-sidebar-tree-item--lesson_plan::before { background: #7c3aed; }
.hct-sidebar-tree-item--workbook::before { background: #c2410c; }

/* The item matching the page currently being viewed -- bolded and with
   a light background tint (in its own content-type color) so it stands
   out from its siblings, since sidebar-tree-state.js force-expands this
   item's branch on load specifically so it's never hidden. */
.hct-sidebar-tree-item--current {
	font-weight: 700;
	color: var(--hct-text-strong);
	padding: 1px 5px;
	margin-left: -5px;
	border-radius: 4px;
}
.hct-sidebar-tree-item--current.hct-sidebar-tree-item--questions { background: var(--hct-primary-light); }
.hct-sidebar-tree-item--current.hct-sidebar-tree-item--lesson_plan { background: #f5f3ff; }
.hct-sidebar-tree-item--current.hct-sidebar-tree-item--workbook { background: #fff7ed; }

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .hct-sidebar-tree-item--lesson_plan::before { background: #c4b5fd; }
	:root:not([data-theme="light"]) .hct-sidebar-tree-item--workbook::before { background: #fdba74; }
	:root:not([data-theme="light"]) .hct-sidebar-tree-item--current.hct-sidebar-tree-item--questions { background: #1e3a5f; }
	:root:not([data-theme="light"]) .hct-sidebar-tree-item--current.hct-sidebar-tree-item--lesson_plan { background: #2e1065; }
	:root:not([data-theme="light"]) .hct-sidebar-tree-item--current.hct-sidebar-tree-item--workbook { background: #431407; }
}
:root[data-theme="dark"] .hct-sidebar-tree-item--lesson_plan::before { background: #c4b5fd; }
:root[data-theme="dark"] .hct-sidebar-tree-item--workbook::before { background: #fdba74; }
:root[data-theme="dark"] .hct-sidebar-tree-item--current.hct-sidebar-tree-item--questions { background: #1e3a5f; }
:root[data-theme="dark"] .hct-sidebar-tree-item--current.hct-sidebar-tree-item--lesson_plan { background: #2e1065; }
:root[data-theme="dark"] .hct-sidebar-tree-item--current.hct-sidebar-tree-item--workbook { background: #431407; }

/* Post-count badge next to each tree node's label (Grade/Subject/Topic),
   matching the live site's own "Class 9 (72)" sidebar display confirmed
   via screenshot. Deliberately a plain muted number, not a colored pill
   like .hct-badge, so it reads as a count annotation rather than another
   taxonomy tag competing for attention next to the node's own link. */
.hct-sidebar-tree-count {
	color: var(--hct-text-muted);
	font-size: 0.8em;
	font-weight: 400;
	margin-left: 3px;
}

.hct-sidebar-empty { color: var(--hct-text-muted); font-size: 0.85rem; font-style: italic; margin: 0; }

/* ---------------- Cards / grid ---------------- */

.hct-hero { margin-bottom: 28px; }
.hct-hero h1 { margin: 0 0 6px; font-size: 1.8rem; color: var(--hct-text-strong); }
.hct-hero p { margin: 0; color: var(--hct-text-muted); }

.hct-home-section { margin-bottom: 32px; }
.hct-home-section-header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 12px;
}
.hct-home-section h2, .hct-home-section-header h2 { margin: 0; font-size: 1.2rem; color: var(--hct-text-strong); }
.hct-see-all { font-size: 0.85rem; font-weight: 600; }

.hct-card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 14px;
}

.hct-card {
	background: var(--hct-surface);
	border: 1px solid var(--hct-border);
	border-radius: var(--hct-radius);
	padding: 16px;
	box-shadow: var(--hct-shadow);
}
.hct-card h3 { margin: 0 0 8px; font-size: 1.02rem; }
.hct-card-excerpt { color: var(--hct-text-muted); font-size: 0.88rem; }

.hct-card-badges, .hct-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; margin-bottom: 14px; }

.hct-card-date { display: block; margin-top: 8px; font-size: 0.78rem; color: var(--hct-text-muted); }

.hct-badge {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 600;
	text-decoration: none;
}
.hct-badge--hc_grade { background: var(--hct-primary-light); color: var(--hct-primary-dark); border: 1px solid #bfdbfe; }
.hct-badge--hc_subject { background: #f5f3ff; color: #6d28d9; border: 1px solid #ddd6fe; }
.hct-badge--hc_topic { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }
.hct-badge--pc_doc_type { background: #fff7ed; color: #c2410c; border: 1px solid #fed7aa; }
.hct-badge:hover { text-decoration: none; filter: brightness(0.95); }

/* ---------------- Archive header / filters ---------------- */

.hct-eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--hct-primary);
	margin: 0 0 4px;
}

.hct-archive-header { margin-bottom: 18px; }
.hct-archive-header h1 { margin: 0 0 6px; font-size: 1.7rem; color: var(--hct-text-strong); }
.hct-term-description { color: var(--hct-text-muted); margin: 0; }

.hct-archive-filters {
	display: flex;
	gap: 18px;
	align-items: flex-end;
	flex-wrap: wrap;
	background: var(--hct-surface);
	border: 1px solid var(--hct-border);
	border-radius: var(--hct-radius);
	padding: 14px 16px;
	margin-bottom: 20px;
}
.hct-archive-filters label {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--hct-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.03em;
}
.hct-archive-filters select {
	padding: 7px 10px;
	border: 1px solid var(--hct-border);
	border-radius: 6px;
	font-size: 0.9rem;
	background: var(--hct-surface);
	color: var(--hct-text);
}
.hct-clear-filters { font-size: 0.85rem; }

.hct-subject-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.hct-pill {
	padding: 6px 14px;
	background: var(--hct-surface);
	border: 1px solid var(--hct-border);
	border-radius: 999px;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--hct-text);
}
.hct-pill:hover { border-color: var(--hct-primary); color: var(--hct-primary); text-decoration: none; }

/* ---------------- Single content ---------------- */

.hct-single {
	background: var(--hct-surface);
	border: 1px solid var(--hct-border);
	border-radius: var(--hct-radius);
	padding: 28px;
	box-shadow: var(--hct-shadow);
}

.hct-single-header { margin-bottom: 20px; padding-bottom: 18px; border-bottom: 1px solid var(--hct-border); }
.hct-single-header h1 { margin: 0 0 10px; font-size: 1.6rem; color: var(--hct-text-strong); }

.hct-entry-content { margin-bottom: 24px; }

.hct-empty-note { color: var(--hct-text-muted); font-style: italic; }

/* Chapter sections / questions */

.hct-chapter-section { margin-bottom: 28px; }
.hct-section-title {
	font-size: 1.15rem;
	color: var(--hct-text-strong);
	margin: 0 0 14px;
	padding-bottom: 6px;
	border-bottom: 2px solid var(--hct-primary-light);
}
.hct-section-roman { color: var(--hct-primary); margin-right: 4px; }

.hct-question {
	background: var(--hct-surface);
	border: 1px solid var(--hct-border);
	border-radius: 6px;
	padding: 14px 16px;
	margin-bottom: 14px;
}
.hct-question-prompt { margin: 0 0 10px; font-weight: 500; color: var(--hct-text); }
.hct-question-number { color: var(--hct-primary); font-weight: 700; margin-right: 4px; }

.hct-question-marks { float: right; color: var(--hct-text-muted); font-size: 0.82rem; font-weight: 400; }

.hct-question-badges {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	margin: 0 0 10px;
}
.hct-q-badge {
	display: inline-block;
	padding: 2px 9px;
	border-radius: 999px;
	font-size: 0.72rem;
	font-weight: 600;
	line-height: 1.6;
}
.hct-q-badge--marks {
	background: var(--hct-primary-light);
	color: var(--hct-primary-dark);
	border: 1px solid #bfdbfe;
}
.hct-q-badge--diff {
	background: var(--hct-bg);
	color: var(--hct-text-muted);
	border: 1px solid var(--hct-border);
}
.hct-q-badge--year {
	background: var(--hct-warning-light);
	color: var(--hct-warning);
	border: 1px solid var(--hct-warning-border);
}

/* Per-question star rating (assets/js/question-ratings.js). Sits inline
   among the other badges rather than on its own row -- it's the same
   kind of small per-question metadata as marks/difficulty/year, just
   interactive. See that script's own file comment for the toggle rule:
   NOT "click star N to set N, click again to clear" -- each star clears
   itself + everything after it when filled, fills itself + everything
   before it when unfilled. */
.hct-star-rating {
	display: inline-flex;
	align-items: center;
	gap: 1px;
	margin-left: 2px;
}
.hct-star-btn {
	background: none;
	border: none;
	padding: 1px;
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
	color: var(--hct-star-unfilled);
}
.hct-star-btn:disabled {
	cursor: default;
	opacity: 0.6;
}
.hct-star-btn.is-filled {
	color: var(--hct-star-gold);
}
.hct-star-btn--disabled {
	color: var(--hct-star-unfilled);
	cursor: not-allowed;
	font-size: 1rem;
	padding: 1px;
}
.hct-star-rating--login-required {
	opacity: 0.7;
}

/* Filter bar: multi-select checkbox chips per facet (stars/marks/
   difficulty/year), pure client-side show/hide of the already-rendered
   .hct-question elements -- see question-ratings.js's applyFilters().
   Sits directly above .hct-chapter-body, one bar for the whole chapter
   (not per-section), since filtering is meant to span every section at
   once. */
.hct-question-filter-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	padding: 12px 14px;
	margin-bottom: 16px;
	background: var(--hct-surface);
	border: 1px solid var(--hct-border);
	border-radius: var(--hct-radius);
}
.hct-filter-bar-label {
	font-weight: 700;
	color: var(--hct-text-strong);
	font-size: 0.85rem;
}
.hct-filter-group {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 4px;
}
.hct-filter-group-label {
	font-size: 0.78rem;
	color: var(--hct-text-muted);
	margin-right: 2px;
}
.hct-filter-chip {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	padding: 3px 8px;
	border: 1px solid var(--hct-border);
	border-radius: 999px;
	font-size: 0.78rem;
	color: var(--hct-text);
	cursor: pointer;
	background: var(--hct-bg);
}
/* :has() covers current browsers; .is-checked (toggled by
   question-ratings.js on every change, not just via CSS) is the fallback
   for anything older, so the chip's checked state is never silently
   invisible on a browser without :has() support. */
.hct-filter-chip:has(input:checked),
.hct-filter-chip.is-checked {
	background: var(--hct-primary-light);
	border-color: var(--hct-primary);
	color: var(--hct-primary-dark);
}
.hct-filter-chip input {
	margin: 0;
}
.hct-filter-clear {
	background: none;
	border: 1px solid var(--hct-border);
	border-radius: 999px;
	padding: 4px 10px;
	font-size: 0.78rem;
	color: var(--hct-text-muted);
	cursor: pointer;
}
.hct-filter-clear:hover {
	color: var(--hct-text);
	border-color: var(--hct-text-muted);
}
.hct-filter-count {
	font-size: 0.78rem;
	color: var(--hct-text-muted);
	margin-left: auto;
}
@media (max-width: 640px) {
	.hct-question-filter-bar {
		flex-direction: column;
		align-items: flex-start;
	}
	.hct-filter-count {
		margin-left: 0;
	}
}

/* skill-lba-pdf-posts: shared reading passage / dialogue turns / labeled
   profile fields inside a subitem's own text_html. Unlike the
   cpt-question-bank plugin's question_text (wrapped in a <p>, so only
   inline elements are safe there), a subitem here renders inside an
   <li> (single-hc_chapter.php line ~106: <li><?php echo wp_kses_post(
   $sub->text_html ); ?></li>), and <li> content model allows block-level
   children -- so a real <div> is safe and simpler here, no <span>
   workaround needed. */
.hct-passage {
	display: block;
	margin: 0 0 8px;
	padding: 8px 10px;
	background: var(--hct-surface-alt, rgba(100, 116, 139, 0.08));
	border-left: 3px solid var(--hct-border);
	border-radius: 4px;
	font-style: italic;
	color: var(--hct-text-muted);
}
.hct-dialogue-line {
	display: block;
}
.hct-dialogue-speaker {
	font-weight: 600;
}
.hct-subq-line {
	display: block;
	margin-top: 4px;
}
.hct-profile-field {
	display: block;
}
.hct-profile-label {
	font-weight: 600;
}

.hct-options { list-style: none; margin: 0 0 10px; padding: 0; }
.hct-option {
	padding: 6px 10px;
	border-radius: 5px;
	margin-bottom: 4px;
	font-size: 0.95rem;
}
.hct-option-letter { font-weight: 700; margin-right: 4px; color: var(--hct-text-muted); }
/* Correct-answer highlight stays hidden until Study Mode/the question's own
   "View Answer" accordion is opened -- .hct-options only gets .revealed via
   assets/js/study-mode.js. Un-gated, every MCQ's correct option would be
   visibly marked on page load, spoiling the practice-quiz use of this page
   (the exact regression the live "wikipress" theme's own lumina.css has a
   standing comment warning against re-introducing -- mirrored here). */
.hct-options.revealed .hct-option--correct {
	background: var(--hct-success-light);
	border: 1px solid var(--hct-success-border);
}
.hct-options.revealed .hct-option--correct .hct-option-letter { color: var(--hct-success); }
.hct-correct-badge {
	margin-left: 8px;
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--hct-success);
	display: none;
}
.hct-options.revealed .hct-correct-badge { display: inline; }

.hct-subitems { margin: 0 0 10px; padding-left: 22px; }

.hct-answer {
	margin-top: 10px;
	padding: 10px 12px;
	background: var(--hct-success-light);
	border: 1px solid var(--hct-success-border);
	border-radius: 6px;
	font-size: 0.92rem;
}
.hct-answer strong { color: var(--hct-success); margin-right: 4px; }

/* ---------------- Study Mode: interactive solution accordion ----------------
   .hct-solution wraps a chapter question's own <details> (built fresh by
   single-hc_chapter.php); .lumina-solution is the IDENTICAL accordion
   shape but the class name is preserved verbatim from the live site's own
   pre-rendered lesson-plan/workbook HTML (migrated byte-for-byte into
   wp_hc_lesson_plan_sections/wp_hc_workbook_sections -- renaming the class
   here would require rewriting that already-migrated content instead of
   just adding the matching CSS/JS, so both names are styled identically
   rather than picking one and converting the other). */
.hct-solution, .lumina-solution {
	margin-top: 10px;
	border-radius: 6px;
	overflow: hidden;
}
.hct-solution details, .lumina-solution details {
	background-color: var(--hct-surface);
	border: 1px solid var(--hct-success-border);
	border-radius: 6px;
}
.hct-solution summary, .lumina-solution summary {
	background-color: var(--hct-success-light);
	color: var(--hct-success);
	font-weight: 700;
	font-size: 0.85rem;
	padding: 8px 14px;
	cursor: pointer;
	outline: none;
	list-style: none;
	display: flex;
	align-items: center;
	gap: 8px;
	user-select: none;
}
.hct-solution summary::-webkit-details-marker, .lumina-solution summary::-webkit-details-marker { display: none; }
.hct-solution-body, .lumina-solution-body {
	padding: 12px 16px;
	background-color: var(--hct-surface);
	font-size: 0.96rem;
	color: var(--hct-text);
	line-height: 1.6;
	border-top: 1px solid var(--hct-success-border);
}
.hct-solution-body strong, .lumina-solution-body strong { color: var(--hct-success); }

/* Narrow-phone padding tightening (e.g. Galaxy S5 at a 360px CSS width).
   Each level below nests INSIDE the last (.hct-content-area > .hct-single
   > .hct-question > .hct-solution-body), so their desktop-sized paddings
   compound: at 360px, .hct-content-area's 20px + .hct-single's 28px +
   .hct-question's 16px + .hct-solution-body's 16px ate 166px of horizontal
   space per side pair -- 46% of the viewport gone before any actual answer
   text renders, even though none of these paddings individually look large
   on a desktop screen. Rather than removing a container (most of them
   carry a real visual border/background, not just spacing), each one's
   own left/right padding shrinks here, roughly matching how much visual
   "card" framing it actually needs at this width -- outer containers keep
   a bit more (they set the page margin), inner ones go tighter since
   they're already inside 2-3 layers of framing. Vertical padding/spacing
   is untouched -- this is purely a horizontal-space fix. This block is
   placed after .hct-solution-body's base rule (which sets the `padding`
   shorthand) so its padding-left/right win the cascade despite equal
   specificity -- source order, not just specificity, decides ties. */
@media (max-width: 600px) {
	.hct-content-area { padding-left: 12px; padding-right: 12px; }
	.hct-single { padding-left: 14px; padding-right: 14px; }
	.hct-question { padding-left: 10px; padding-right: 10px; }
	.hct-solution-body, .lumina-solution-body { padding-left: 10px; padding-right: 10px; }
}

.hct-study-mode-btn {
	display: block;
	padding: 8px 16px;
	border-radius: 6px;
	border: none;
	background: var(--hct-primary);
	color: #fff;
	font-weight: 600;
	font-size: 0.88rem;
	cursor: pointer;
	margin-top: 10px;
	margin-bottom: 16px;
}
.hct-study-mode-btn:hover { background: var(--hct-primary-dark); }

/* Lesson plan / workbook sections */

.hct-lp-section, .hct-wb-section { margin-bottom: 24px; }
.hct-lp-section-content, .hct-wb-section-content { color: var(--hct-text); }
.hct-lp-section-content :first-child, .hct-wb-section-content :first-child { margin-top: 0; }

/* Personal content */

.hct-personal-owner { color: var(--hct-text-muted); font-size: 0.85rem; font-style: italic; margin: 6px 0 0; }

.hct-not-authorized {
	background: var(--hct-surface);
	border: 1px solid var(--hct-danger-border);
	border-radius: var(--hct-radius);
	padding: 32px;
	text-align: center;
	color: var(--hct-danger);
}
.hct-not-authorized h1 { margin-top: 0; color: var(--hct-danger); }

/* ---------------- Footer ---------------- */

.hct-site-footer {
	border-top: 1px solid var(--hct-border);
	background: var(--hct-surface);
	margin-top: 40px;
}
.hct-site-footer-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 18px 20px;
	color: var(--hct-text-muted);
	font-size: 0.85rem;
	text-align: center;
}

/* ---------------- Pagination ---------------- */

.pagination, .nav-links {
	display: flex;
	gap: 8px;
	margin-top: 20px;
}
.page-numbers {
	padding: 6px 12px;
	border: 1px solid var(--hct-border);
	border-radius: 6px;
	background: var(--hct-surface);
	color: var(--hct-text);
}
.page-numbers.current { background: var(--hct-primary); color: #fff; border-color: var(--hct-primary); }

/* ---------------- Math & chemistry formulas ----------------
   Migrated question/answer HTML carries these classes verbatim from the
   source content (e.g. "CuSO<sub>4</sub> + X <span class="lumina-arrow">
   &rarr;</span> Cu + Y", "$2x - 8 = 6y$"). Class names match the live
   "wikipress" theme's lumina.css exactly so migrated markup needs no
   rewriting -- only these two rules were missing here. Raw $...$ LaTeX
   delimiters are typeset by assets/js/math-chemistry.js (KaTeX); this
   CSS only styles what plain HTML/CSS can (the arrow, and font choice
   for any inline formula wrapper spans). */

.lumina-formula,
.lumina-equation {
	font-family: 'Cambria Math', 'KaTeX_Main', 'Times New Roman', serif;
	font-size: 1.1rem;
	letter-spacing: 0.3px;
	color: var(--hct-text);
}

.lumina-arrow {
	display: inline-block;
	margin: 0 8px;
	color: var(--hct-primary);
	font-weight: bold;
}

/* Keep KaTeX's visual and accessibility layers inside narrow screens. */
.katex-mathml {
	overflow: hidden;
	contain: strict;
	width: 1px;
	height: 1px;
}

.katex-display {
	max-width: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	/* KaTeX's own katex.css centers every $$...$$ display-math block by
	   default (text-align: center, both on .katex-display itself and on
	   the .katex element inside it) -- correct for a standalone equation
	   in a math textbook, but inconsistent here: a multi-step worked
	   solution written as several $$...$$ lines then renders each line
	   centered while the surrounding prose/inline-$...$ math stays left-
	   aligned, so one answer's steps visually jump between the two
	   alignments depending on which delimiter a given line happened to
	   use. Left-align both levels so every answer reads consistently,
	   regardless of whether a specific formula was authored as inline or
	   display math.

	   !important is required here, not just a specificity nicety:
	   assets/js/math-chemistry.js injects katex.min.css via a dynamically
	   created <script>/<link> (document.head.appendChild) at runtime,
	   which lands AFTER this theme stylesheet in the page's actual <head>
	   order despite this file being enqueued first -- with equal
	   selector specificity on both sides, source order decides the
	   winner, and KaTeX's own later-loaded rule would otherwise beat this
	   one every time. */
	text-align: left !important;
}

.katex-display > .katex {
	text-align: left !important;
}

/* ---------------- Responsive diagrams/images ----------------
   Class names preserved verbatim from the migrated content (same
   reasoning as .lumina-formula/.lumina-arrow above: rewriting the
   already-migrated HTML would be far more work than matching its
   existing classes here). The plain `img { max-width: 100% }` rule near
   the top of this file is not enough on its own for two real cases
   confirmed in the migrated data: (1) .lumina-diagram-container wraps an
   image in a flex box that needs its own centering/margin, not just the
   img tag; (2) Diagramming Sentences answer_html (.lumina-diagram-box)
   carries a per-image inline style="max-width:NNNpx" baked in at the
   live site's own import time (each diagram's real desktop size,
   confirmed ranging 240-680px) -- an inline style attribute always wins
   over a plain class rule, so on a narrow screen these diagrams render
   small and fixed-size instead of using the space available. Mirrors
   the live "wikipress" theme's own lumina.css fix for this exact gap. */
.lumina-diagram-container {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 14px 0;
	max-width: 100%;
}
.lumina-diagram-container img,
.lumina-diagram-image,
.hct-question-prompt img,
.hct-solution-body img,
.hct-lp-section-content img,
.hct-wb-section-content img {
	max-width: 100%;
	height: auto;
	border-radius: 6px;
	display: block;
}

/* .lumina-diagram-box (distinct from .lumina-diagram-container above --
   this is the Diagramming Sentences answer_html wrapper) carries a
   per-image inline style="max-width:NNNpx" baked in at the live site's
   own import time (each diagram's real desktop size, 240-680px across
   the corpus). A real, confirmed overflow bug: that inline max-width was
   only ever being overridden below the 480px phone breakpoint (matching
   the live "wikipress" theme's own fix, which exists for the narrower
   "doesn't use the screen it has" case, not overflow) -- but at any
   width NARROWER than the image's own inline px value (e.g. a 520px
   diagram inside a ~400-480px content column once the sidebar is
   collapsed and the browser window itself isn't desktop-wide), nothing
   constrained the image at all outside that one breakpoint, and an
   inline style attribute always beats a plain class rule regardless of
   viewport -- so the image overflowed its container. Fixed at every
   width (not just phone), with !important required specifically because
   this is overriding an INLINE style attribute, not another class. */
.lumina-diagram-box {
	max-width: 100%;
	overflow-x: auto;
}
.lumina-diagram-box img {
	max-width: 100% !important;
	height: auto !important;
	/* These diagrams are hand-drawn PNGs with an opaque WHITE background
	   baked into the image file itself (confirmed -- not something CSS can
	   recolor) -- in light mode that's invisible against the page, but in
	   dark mode it reads as a jarring bright rectangle with no visual
	   relationship to the page around it. A light padded "card" frame
	   around the image (rather than trying to hide/invert the image
	   itself, which would distort the actual diagram content) reads as an
	   intentional, framed diagram instead of a rendering glitch. */
	background: #fff;
	padding: 12px;
	border-radius: 8px;
	box-shadow: var(--hct-shadow);
}

/* Wide tables (common in workbook/lesson-plan content) scroll within
   their own box instead of forcing the whole page to overflow
   horizontally -- class name preserved verbatim from migrated content,
   same reasoning as above. */
.lumina-table-wrap,
.lumina-table-scroll {
	width: 100%;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin: 12px 0;
}

/* ---------------- Tables ----------------
   Migrated content renders tables two ways: table.wikitable (class name
   preserved verbatim from the source, 217 real rows in wp_hc_answers) and
   bare, unclassed <table> elements (lesson-plan "Core Teaching Content"
   sections, parsed from a Markdown table at migration time -- no class
   was ever added to those). Neither had ANY styling in this theme before
   this rule, so both rendered with the browser's own heavy black
   default grid -- a real, confirmed visual distraction next to the
   theme's otherwise soft card/badge palette. Borders here are
   deliberately thin (1px) and low-contrast (--hct-border, not a darker
   token), with a soft header/zebra tint instead of a second border
   color, matching the live "wikipress" theme's own .lumina-table /
   table.wikitable rules -- present enough to separate cells, not bold
   enough to compete with the actual content. */
.hct-question-prompt table,
.hct-solution-body table,
.hct-lp-section-content table,
.hct-wb-section-content table,
table.wikitable {
	width: 100%;
	border-collapse: collapse;
	background: var(--hct-surface);
	border: 1px solid var(--hct-border);
	border-radius: 6px;
	font-size: 0.92rem;
	margin: 12px 0;
}
.hct-question-prompt th, .hct-question-prompt td,
.hct-solution-body th, .hct-solution-body td,
.hct-lp-section-content th, .hct-lp-section-content td,
.hct-wb-section-content th, .hct-wb-section-content td,
table.wikitable th, table.wikitable td {
	padding: 8px 12px;
	border: 1px solid var(--hct-border);
	text-align: left;
}
.hct-question-prompt th,
.hct-solution-body th,
.hct-lp-section-content th,
.hct-wb-section-content th,
table.wikitable th {
	background: var(--hct-bg);
	font-weight: 700;
	color: var(--hct-text-strong);
}
.hct-question-prompt tr:nth-child(even) td,
.hct-solution-body tr:nth-child(even) td,
.hct-lp-section-content tr:nth-child(even) td,
.hct-wb-section-content tr:nth-child(even) td,
table.wikitable tr:nth-child(even) td {
	background: var(--hct-bg);
}

/* [cpt_hc_content_coverage] front-end coverage matrix -- same table
   visual language as .wikitable above (border/stripe/header treatment),
   plus its own filter form and yes/no cell markers. */
.hct-content-coverage {
	max-width: 960px;
	margin: 0 auto;
}
.hct-content-coverage-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 16px 0;
}
.hct-content-coverage-table {
	width: 100%;
	border-collapse: collapse;
	background: var(--hct-surface);
	border: 1px solid var(--hct-border);
	border-radius: 6px;
	font-size: 0.92rem;
	margin: 12px 0;
}
.hct-content-coverage-table th,
.hct-content-coverage-table td {
	padding: 8px 12px;
	border: 1px solid var(--hct-border);
	text-align: left;
}
.hct-content-coverage-table th {
	background: var(--hct-bg);
	font-weight: 700;
	color: var(--hct-text-strong);
}
.hct-content-coverage-table tr:nth-child(even) td {
	background: var(--hct-bg);
}
.hct-content-coverage-items-col {
	font-size: 0.88rem;
	line-height: 1.5;
}
.hct-coverage-missing {
	color: var(--hct-danger);
	font-style: italic;
}

/* ---------------- Static wiki-style reference content ----------------
   Scopes every rule below to .hct-wiki-content so it never leaks into
   any other post type's styling. Used by hc_chapter_raw posts that are
   static Markdown-derived reference documents (grammar guides, formula
   sheets, study notes) rather than hand-built interactive HTML/CSS/JS
   apps -- hc_chapter_raw's own template (single-hc_chapter_raw.php)
   renders post_content completely as-is with no theme chrome around it
   either way, so this class is opted into by wrapping the converted
   Markdown's own root element in it (see skills/skill-md-post/SKILL.md),
   not by the template itself -- an interactive app's post_content simply
   never includes this class and is completely unaffected. */

.hct-wiki-content {
	line-height: 1.7;
	color: var(--hct-text);
}
.hct-wiki-content h2 {
	font-size: 1.35rem;
	color: var(--hct-text-strong);
	margin: 32px 0 14px;
	padding-bottom: 6px;
	border-bottom: 2px solid var(--hct-primary-light);
}
.hct-wiki-content h3 {
	font-size: 1.12rem;
	color: var(--hct-text-strong);
	margin: 24px 0 10px;
}
.hct-wiki-content h4 {
	font-size: 1rem;
	color: var(--hct-text-strong);
	margin: 18px 0 8px;
}
.hct-wiki-content p { margin: 0 0 14px; }
.hct-wiki-content hr.hct-wiki-divider {
	border: none;
	border-top: 1px solid var(--hct-border);
	margin: 28px 0;
}

/* Table of contents -- generated server-side at import/render time (see
   the skill), not by any client-side JS, so it works with no script and
   degrades to a plain link list if collapse/expand JS ever fails to
   load. */
.hct-wiki-toc {
	background: var(--hct-surface);
	border: 1px solid var(--hct-border);
	border-radius: var(--hct-radius);
	padding: 14px 18px;
	margin: 0 0 24px;
	display: inline-block;
	max-width: 100%;
}
.hct-wiki-toc-title {
	font-weight: 700;
	cursor: pointer;
	color: var(--hct-text-strong);
	display: flex;
	align-items: center;
	gap: 8px;
	user-select: none;
}
.hct-wiki-toc-title::before {
	content: '\25B6';
	font-size: 0.7em;
	transition: transform 0.15s ease;
}
.hct-wiki-toc.is-open .hct-wiki-toc-title::before { transform: rotate(90deg); }
.hct-wiki-toc-list {
	list-style: none;
	margin: 10px 0 0;
	padding: 0;
	display: none;
}
.hct-wiki-toc.is-open .hct-wiki-toc-list { display: block; }
.hct-wiki-toc-list li { margin-bottom: 4px; }
.hct-wiki-toc-list a { font-size: 0.92rem; }
.hct-wiki-toc-list .hct-wiki-toc-sub {
	list-style: none;
	margin: 4px 0 4px 18px;
	padding: 0;
}
.hct-wiki-toc-list .hct-wiki-toc-sub a { font-size: 0.85rem; color: var(--hct-text-muted); }

/* Wikitable -- a wide reference table, wrapped by the skill's own
   importer in .hct-table-scroll so it scrolls within its own bounded box
   on narrow screens instead of forcing the whole page sideways (the same
   class of bug documented at length in this project's own history for
   the sibling personal-docs content). */
.hct-table-scroll {
	overflow-x: auto;
	margin: 0 0 20px;
	-webkit-overflow-scrolling: touch;
}
.hct-wiki-content table.hct-wikitable {
	border-collapse: collapse;
	width: 100%;
	min-width: 480px;
	font-size: 0.92rem;
}
.hct-wiki-content table.hct-wikitable th,
.hct-wiki-content table.hct-wikitable td {
	border: 1px solid var(--hct-border);
	padding: 8px 12px;
	text-align: left;
}
.hct-wiki-content table.hct-wikitable th {
	background: var(--hct-primary-light);
	color: var(--hct-text-strong);
	font-weight: 700;
}
.hct-wiki-content table.hct-wikitable tr:nth-child(even) td {
	background: var(--hct-bg);
}

/* Callout messagebox -- a highlighted note/important/warning block,
   converted from a Markdown blockquote (`> [!NOTE]` etc.) or a plain
   blockquote defaulting to the neutral "notice" variant. */
.hct-wiki-messagebox {
	border-left: 4px solid var(--hct-primary);
	background: var(--hct-primary-light);
	border-radius: 0 6px 6px 0;
	padding: 12px 16px;
	margin: 0 0 20px;
}
.hct-wiki-messagebox.hct-wiki-messagebox--warning {
	border-left-color: var(--hct-warning);
	background: var(--hct-warning-light);
}
.hct-wiki-messagebox.hct-wiki-messagebox--success {
	border-left-color: var(--hct-success);
	background: var(--hct-success-light);
}
.hct-wiki-messagebox-header {
	font-weight: 700;
	color: var(--hct-text-strong);
	margin: 0 0 6px;
}
.hct-wiki-messagebox p:last-child { margin-bottom: 0; }

/* A short italic lede/intro line -- converted from a standalone
   *italic-only* Markdown line. */
.hct-wiki-hatnote {
	font-style: italic;
	color: var(--hct-text-muted);
	margin: 0 0 14px;
}

/* Numbered worked-example lists get slightly more breathing room than a
   plain <ol>, since each item is usually a full example sentence/case
   rather than a short phrase. */
.hct-wiki-content ol.hct-wiki-example-list li { margin-bottom: 8px; }

@media (max-width: 600px) {
	.hct-wiki-content table.hct-wikitable { font-size: 0.85rem; }
	.hct-wiki-content table.hct-wikitable th,
	.hct-wiki-content table.hct-wikitable td { padding: 6px 8px; }
}

/* Anti-FOUM (Flash of Unrendered Math) Shield:
   Hides raw LaTeX delimiter text until KaTeX transforms it, then reveals
   with a fast 0.12s transition. Eliminates flickering text during page load. */
.hct-chapter-body {
	opacity: 0;
	transition: opacity 0.12s ease-in-out;
}
.hct-chapter-body.katex-ready {
	opacity: 1;
}