/* Radical Flux 2026 — chart-table layer (STORM #10-#14).
   Quiet utility template family: light paper ground, Lintel body, Trajan
   page titles only, flux-line dividers, compact navy header. All scoped
   under body.chart-table so it never bleeds into the Experience Rooms.
   Tokens reused from main.css (webdesign-engine/sites/radicalflux.ca/skin.json);
   no new colors introduced here. */

body.chart-table {
	background: var(--c-paper);
	font-family: var(--font-text);
}

/* ---------- Compact navy header (skin.json plain_mode_header spec) ----------
   Same override path header.php already uses for .site-header--overlay
   (white brand/nav/cart on a dark ground) — here static + solid navy
   instead of fixed + transparent. site-brand already carries its own
   flux-line underline (site-brand__line), so no new markup is needed. */
body.chart-table .site-header {
	position: static;
	background: var(--c-primary);
	border-bottom-color: transparent;
}
body.chart-table .site-header .site-brand,
body.chart-table .site-header .site-nav__list a,
body.chart-table .site-header .site-cart { color: #fff; }
body.chart-table .site-header .site-nav__list a:hover { color: var(--c-link); }
body.chart-table .nav-toggle__label span { background: #fff; }

/* ---------- Article head: flattened to paper (no immersive navy band) ---------- */
body.chart-table .article__head {
	background: var(--c-paper);
	color: var(--c-ink);
	padding: 2.25rem clamp(1.25rem, 4vw, 2.5rem) 1.5rem;
}
body.chart-table .article__head-inner { max-width: 46rem; margin-inline: auto; }
body.chart-table .article__title {
	font-family: var(--font-display);
	color: var(--c-primary);
	font-size: var(--fs-2);
	max-width: none;
}
body.chart-table .article__body,
body.chart-table .article__body h2,
body.chart-table .article__body h3 { font-family: var(--font-text); }

/* ---------- Prose column: 46rem (wider than the room default 42rem) ---------- */
body.chart-table .prose { max-width: 46rem; }

/* ---------- Breadcrumbs ---------- */
body.chart-table .ct-breadcrumbs { font-family: var(--font-text); font-size: 0.82rem; margin: 0 0 1.1rem; }
body.chart-table .ct-breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 0.35rem; list-style: none; margin: 0; padding: 0; }
body.chart-table .ct-breadcrumbs li:not(:last-child)::after { content: "/"; margin-left: 0.35rem; color: var(--c-slate); opacity: 0.6; }
body.chart-table .ct-breadcrumbs a { color: var(--c-flux-deep); text-decoration: none; }
body.chart-table .ct-breadcrumbs a:hover { text-decoration: underline; }
body.chart-table .ct-breadcrumbs [aria-current="page"] { color: var(--c-slate); }

/* ---------- Onward block (mandatory, STORM #12) ----------
   .flux-line is the existing signature-motif class from main.css — reused
   here unchanged, not redefined. */
body.chart-table .ct-onward {
	max-width: 46rem;
	margin: 0 auto;
	padding: 2.5rem clamp(1.25rem, 4vw, 2.5rem) var(--space-band);
	text-align: center;
}
body.chart-table .ct-onward .flux-line { width: min(14rem, 42%); margin: 0 auto 1.5rem; }
body.chart-table .ct-onward__lead {
	font-family: var(--font-accent);
	font-style: italic;
	color: var(--c-primary);
	font-size: 1.1rem;
	margin: 0 0 1.2rem;
}
body.chart-table .ct-onward__rooms {
	list-style: none; margin: 1.6rem 0 0; padding: 0;
	display: flex; flex-wrap: wrap; justify-content: center; gap: 1.2rem 2rem;
}
body.chart-table .ct-onward__rooms a { font-family: var(--font-display); font-weight: 600; color: var(--c-primary); text-decoration: none; }
body.chart-table .ct-onward__rooms a:hover { color: var(--c-flux-deep); }
body.chart-table .ct-onward__rooms span { display: block; font-family: var(--font-text); font-size: 0.85rem; color: var(--c-slate); }

/* .btn--flux: chart-table's button skin — same solid pattern as .btn--solid
   (var(--c-flux-deep) fill; skin.json reserves raw --c-flux for the motif/accents
   only, never button fills, per the STORM chroma-vibration finding). */
body.chart-table .btn--flux { background: var(--c-flux-deep); color: #fff; box-shadow: 0 10px 30px -10px rgba(11, 122, 110, 0.55); }
body.chart-table .btn--flux:hover { background: var(--c-primary); color: #fff; }

/* ---------- Ship's Log (home.php / category.php) ----------
   Text-first cards (photography is placeholder-gated, so no thumbnails yet).
   All tokens reused from main.css; no new colors. */
body.chart-table .ct-log-wrap { max-width: 46rem; margin-inline: auto; }
body.chart-table .ct-intro {
	font-family: var(--font-accent);
	font-style: italic;
	color: var(--c-slate);
	font-size: 1.08rem;
	line-height: 1.6;
	max-width: 40rem;
	margin: 0.6rem 0 0;
}

/* Category filter row */
body.chart-table .ct-filter {
	display: flex; flex-wrap: wrap; gap: 0.5rem 0.65rem;
	margin: 0 0 2rem;
	padding: 0 0 1.4rem;
	border-bottom: 1px solid var(--c-mist);
}
body.chart-table .ct-filter__link {
	font-family: var(--font-text);
	font-size: 0.85rem;
	line-height: 1;
	color: var(--c-slate);
	text-decoration: none;
	padding: 0.5rem 0.9rem;
	border: 1px solid var(--c-mist);
	border-radius: 999px;
	transition: color 0.15s, border-color 0.15s, background 0.15s;
}
body.chart-table .ct-filter__link:hover { color: var(--c-flux-deep); border-color: var(--c-flux-deep); }
body.chart-table .ct-filter__link.is-active {
	color: #fff; background: var(--c-primary); border-color: var(--c-primary);
}

/* Card list */
body.chart-table .ct-log { list-style: none; margin: 0; padding: 0; }
body.chart-table .ct-card { padding: 1.6rem 0; border-bottom: 1px solid var(--c-mist); }
body.chart-table .ct-card:first-child { padding-top: 0; }
body.chart-table .ct-card__meta {
	display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem;
	margin: 0 0 0.5rem;
	font-family: var(--font-text); font-size: 0.8rem; color: var(--c-slate);
}
body.chart-table .ct-chip {
	font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase;
	color: var(--c-flux-deep); text-decoration: none;
	padding: 0.2rem 0.6rem;
	background: var(--c-mist); border-radius: 999px;
}
body.chart-table .ct-chip:hover { background: var(--c-flux-deep); color: #fff; }
body.chart-table .ct-card__title {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 1.5rem;
	line-height: 1.2;
	margin: 0 0 0.5rem;
}
body.chart-table .ct-card__title a { color: var(--c-primary); text-decoration: none; }
body.chart-table .ct-card__title a:hover { color: var(--c-flux-deep); }
body.chart-table .ct-card__excerpt {
	font-family: var(--font-text); color: var(--c-ink);
	line-height: 1.6; margin: 0 0 0.7rem;
}
body.chart-table .ct-card__more a {
	font-family: var(--font-text); font-size: 0.88rem; font-weight: 600;
	color: var(--c-flux-deep); text-decoration: none;
}
body.chart-table .ct-card__more a:hover { text-decoration: underline; }
body.chart-table .ct-log__empty { color: var(--c-slate); font-style: italic; }

/* Single entry meta line under the title */
body.chart-table .ct-single__meta { margin-top: 0.9rem; }

/* Pagination (the_posts_pagination) */
body.chart-table .pagination { margin: 2.4rem 0 0; font-family: var(--font-text); }
body.chart-table .pagination .nav-links { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; }
body.chart-table .pagination .page-numbers {
	padding: 0.4rem 0.8rem; border: 1px solid var(--c-mist); border-radius: 6px;
	color: var(--c-flux-deep); text-decoration: none; font-size: 0.9rem;
}
body.chart-table .pagination .page-numbers.current { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }

/* ---------- Contact + Project Qualification Brief forms (Task 7) ----------
   .rf-contact is the two-column shell (template-contact.php); .rf-form is
   the form itself, reused wherever rf_render_form() is called (contact,
   qualification, and — Task 9 — kit_inquiry/package_inquiry on shop pages). */
body.chart-table .rf-contact {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
	gap: clamp(2rem, 5vw, 3.5rem);
	max-width: 46rem;
	margin: 2.5rem auto 0;
}
body.chart-table .rf-contact__col h2 {
	font-family: var(--font-display);
	color: var(--c-primary);
	font-size: 1.25rem;
	margin: 0 0 0.5rem;
}
body.chart-table .rf-contact__col > p { color: var(--c-slate); margin: 0 0 1.2rem; }

body.chart-table .rf-form { font-family: var(--font-text); }
body.chart-table .rf-form p { margin: 0 0 1rem; }
body.chart-table .rf-form label {
	display: block;
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--c-ink);
	margin: 0 0 0.35rem;
}
body.chart-table .rf-form input[type="text"],
body.chart-table .rf-form input[type="email"],
body.chart-table .rf-form textarea {
	width: 100%;
	font-family: var(--font-text);
	font-size: 0.95rem;
	color: var(--c-ink);
	background: var(--c-paper);
	border: 1px solid var(--c-mist);
	border-radius: 8px;
	padding: 0.65rem 0.8rem;
	margin-top: 0.35rem;
}
body.chart-table .rf-form input:focus,
body.chart-table .rf-form textarea:focus {
	outline: 2px solid var(--c-flux-deep);
	outline-offset: 1px;
}

/* Honeypot: visually hidden but NOT display:none (bots skip display:none) */
body.chart-table .rf-form__hp {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0; border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

body.chart-table .rf-form__consent { font-size: 0.85rem; color: var(--c-slate); }
body.chart-table .rf-form__consent a { color: var(--c-flux-deep); }
body.chart-table .rf-form__sla { font-size: 0.82rem; color: var(--c-slate); font-style: italic; }

/* Confirmation band (?sent=1) */
body.chart-table .rf-sent {
	max-width: 34rem;
	margin: 2.5rem auto 0;
	padding: 2rem clamp(1.25rem, 4vw, 2rem);
	text-align: center;
	background: var(--c-mist);
	border-radius: 12px;
}
body.chart-table .rf-sent h2 { font-family: var(--font-display); color: var(--c-primary); margin: 0 0 0.6rem; }
body.chart-table .rf-sent p { color: var(--c-ink); margin: 0; }

/* ---------- Q&A platform (archive-rf_question.php, Task 6) ----------
   Grouped index of answered questions + an honest "Open questions" list.
   All tokens reused from main.css; no new colors. */
body.chart-table .ct-qa { max-width: 46rem; margin-inline: auto; }
body.chart-table .ct-qa__group { margin: 0 0 2.4rem; }
body.chart-table .ct-qa__group-title {
	font-family: var(--font-display);
	color: var(--c-primary);
	font-size: 1.35rem;
	margin: 0 0 0.35rem;
}
body.chart-table .ct-qa__group-desc {
	font-family: var(--font-text); color: var(--c-slate);
	font-size: 0.92rem; line-height: 1.55; margin: 0 0 1rem;
}
body.chart-table .ct-qa__list { list-style: none; margin: 0; padding: 0; }
body.chart-table .ct-qa__item { border-bottom: 1px solid var(--c-mist); }
body.chart-table .ct-qa__q {
	display: block;
	font-family: var(--font-display); font-weight: 600; font-size: 1.15rem;
	color: var(--c-primary); text-decoration: none;
	padding: 0.9rem 0;
}
body.chart-table .ct-qa__q:hover { color: var(--c-flux-deep); }

/* Open-questions section — visually distinct, honesty foregrounded */
body.chart-table .ct-qa__open { margin: 2.4rem 0 0; }
body.chart-table .ct-qa__open .flux-line { width: min(14rem, 42%); margin: 0 0 1.5rem; }
body.chart-table .ct-qa__open-list { list-style: none; margin: 1.2rem 0 0; padding: 0; }
body.chart-table .ct-qa__open-item {
	padding: 1.3rem 0; border-bottom: 1px solid var(--c-mist);
}
body.chart-table .ct-qa__open-q {
	font-family: var(--font-display); font-weight: 600; font-size: 1.1rem;
	color: var(--c-primary); margin: 0 0 0.5rem;
}
body.chart-table .ct-qa__open-body { max-width: none; color: var(--c-ink); }
body.chart-table .ct-qa__open-body p { margin: 0; }
body.chart-table .ct-qa__ask { margin: 0.7rem 0 0; }
body.chart-table .ct-qa__ask a {
	font-family: var(--font-text); font-size: 0.9rem; font-weight: 600;
	color: var(--c-flux-deep); text-decoration: none;
}
body.chart-table .ct-qa__ask a:hover { text-decoration: underline; }

/* ---------- Shop / WooCommerce (Task 9) ----------
   Inquiry-state products, service-terms gate, B2B fields, shop-archive door.
   All tokens reused from main.css; no new colors introduced. */

/* Shop archive intro + three-step "how buying works" band */
body.chart-table .shop-intro { background: var(--c-paper); }
body.chart-table .shop-intro__inner {
	max-width: 46rem; margin-inline: auto;
	padding: 2.25rem clamp(1.25rem, 4vw, 2.5rem) 1rem;
}
body.chart-table .shop-intro__title {
	font-family: var(--font-display); color: var(--c-primary);
	font-size: var(--fs-2); margin: 0.3rem 0 0.8rem; max-width: none;
}
body.chart-table .shop-intro__lede {
	font-family: var(--font-text); color: var(--c-ink);
	line-height: 1.6; margin: 0 0 1.8rem;
}
body.chart-table .shop-how {
	list-style: none; margin: 0; padding: 0;
	display: grid; gap: 1.2rem;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	border-top: 1px solid var(--c-mist);
	padding-top: 1.6rem;
}
body.chart-table .shop-how__step { margin: 0; }
body.chart-table .shop-how__n {
	display: inline-flex; align-items: center; justify-content: center;
	width: 1.8rem; height: 1.8rem; border-radius: 999px;
	background: var(--c-primary); color: #fff;
	font-family: var(--font-display); font-size: 0.95rem;
}
body.chart-table .shop-how__t {
	font-family: var(--font-display); color: var(--c-primary);
	font-size: 1.1rem; margin: 0.5rem 0 0.35rem;
}
body.chart-table .shop-how__step p {
	font-family: var(--font-text); color: var(--c-ink);
	font-size: 0.92rem; line-height: 1.55; margin: 0 0 0.4rem;
}
body.chart-table .shop-how__link {
	font-weight: 600; color: var(--c-flux-deep); text-decoration: none;
}
body.chart-table .shop-how__link:hover { text-decoration: underline; }

/* Product lede + MEASURED/MODEL proof labels (STORM #18) */
body.chart-table .rf-lede {
	font-family: var(--font-accent); font-style: italic;
	color: var(--c-slate); font-size: 1.05rem; line-height: 1.6;
}
body.chart-table .rf-proof {
	display: inline-block; font-family: var(--font-text);
	font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em;
	text-transform: uppercase; padding: 0.2rem 0.6rem; border-radius: 999px;
	margin-right: 0.5rem;
}
body.chart-table .rf-proof--measured { background: var(--c-flux-deep); color: #fff; }
body.chart-table .rf-proof--model {
	background: var(--c-mist); color: var(--c-slate);
	border: 1px solid var(--c-slate);
}

/* Inquiry-state: pricing-method note + price-position note (R5, STORM #9) */
body.chart-table .rf-pricing-method {
	margin: 1.2rem 0 1.6rem; padding: 1.1rem 1.2rem;
	background: var(--c-mist); border-left: 3px solid var(--c-flux-deep);
	border-radius: 8px; font-family: var(--font-text);
	color: var(--c-ink); line-height: 1.55;
}
body.chart-table .rf-pricing-method p { margin: 0 0 0.6rem; }
body.chart-table .rf-pricing-method p:last-child { margin-bottom: 0; }
body.chart-table .rf-price-method-note {
	font-family: var(--font-text); font-style: italic; color: var(--c-slate);
}

/* Four-disclosures block (STORM #2) — above the buy action */
body.chart-table .rf-disclosures {
	margin: 1rem 0 1.4rem; padding: 1.1rem 1.2rem;
	border: 1px solid var(--c-mist); border-radius: 8px;
	font-family: var(--font-text); color: var(--c-ink);
}
body.chart-table .rf-disclosures__title {
	font-weight: 600; color: var(--c-primary); margin: 0 0 0.6rem;
}
body.chart-table .rf-disclosures ol { margin: 0; padding-left: 1.2rem; }
body.chart-table .rf-disclosures li { margin: 0 0 0.5rem; line-height: 1.5; font-size: 0.92rem; }

/* Mandatory service-terms checkbox at checkout (STORM #2) */
body.chart-table .rf-service-terms {
	margin: 1rem 0; padding: 1rem 1.1rem;
	background: var(--c-mist); border-radius: 8px;
	font-family: var(--font-text); font-size: 0.9rem; line-height: 1.5;
}
body.chart-table .rf-service-terms a { color: var(--c-flux-deep); }