/* Chronological Companion — front-end styles.
   Everything is scoped under .cc-root so it neither leaks into the theme nor
   inherits surprises from it. Colors and the optional font come from inline
   variables set by the plugin; the neutrals below are deliberate and shared. */

.cc-root {
	--cc-surface: #ffffff;
	--cc-ink: #1b2438;
	--cc-muted: #566077;
	--cc-rule: #d6dbe7;
	--cc-quote-bg: #faf6e4;
	--cc-track: #dde2ee;
	--cc-on-accent: #14203a;
	--cc-on-button: #ffffff;
	/* --cc-accent, --cc-head, --cc-button, --cc-font are injected inline. */
	font-family: var(--cc-font, inherit);
	color: var(--cc-ink);
	line-height: 1.6;
	font-size: 1.0625rem;
	box-sizing: border-box;
}
.cc-root *, .cc-root *::before, .cc-root *::after { box-sizing: inherit; }
.cc-root a { color: var(--cc-button); }
.cc-root img { max-width: 100%; height: auto; }

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

.cc-eyebrow { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--cc-muted); margin: 0 0 8px; font-variant-numeric: tabular-nums; }
.cc-h1 { font-size: clamp(1.6rem, 5vw, 2.3rem); line-height: 1.15; margin: 0 0 12px; color: var(--cc-head); }
.cc-lede { font-size: 1.12rem; color: var(--cc-muted); max-width: 36rem; margin: 0 0 24px; }
.cc-label { font-size: 1.35rem; line-height: 1.25; color: var(--cc-head); margin: 34px 0 12px; padding-bottom: 6px; border-bottom: 1px solid var(--cc-rule); font-weight: 700; }
.cc-hint { color: var(--cc-muted); font-size: .95rem; margin: 16px 0 0; max-width: 40rem; }
.cc-empty { padding: 16px; background: var(--cc-quote-bg); border-left: 4px solid var(--cc-accent); }

/* Buttons. The color/background/border carry !important because these are
   often <a> elements, and a theme's own link styles would otherwise override
   them and leave the label unreadable against the button fill. */
.cc-root .cc-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 20px; background: var(--cc-button) !important; color: var(--cc-on-button) !important; border: 2px solid var(--cc-button) !important; border-radius: 2px; font: inherit; font-weight: 700; text-decoration: none !important; cursor: pointer; }
.cc-root .cc-btn:hover { filter: brightness(1.08); }
.cc-root .cc-btn.cc-secondary { background: transparent !important; color: var(--cc-button) !important; }
.cc-root .cc-btn.cc-quiet { background: transparent !important; color: var(--cc-muted) !important; border-color: var(--cc-rule) !important; font-weight: 400; }
.cc-btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; }
.cc-root :focus-visible { outline: 3px solid var(--cc-button); outline-offset: 2px; }

/* Progress panel */
.cc-panel { background: var(--cc-surface); border: 1px solid var(--cc-rule); padding: 20px; display: grid; gap: 14px; margin: 8px 0 8px; }
.cc-count { font-size: 1.2rem; margin: 0; color: var(--cc-head); font-variant-numeric: tabular-nums; }
.cc-bar { height: 10px; background: var(--cc-track); }
.cc-bar > i { display: block; height: 100%; background: var(--cc-accent); transition: width .3s ease; }
.cc-next { margin: 0; color: var(--cc-muted); font-size: .95rem; }

/* Part lists */
.cc-part { margin-top: 32px; }
.cc-part-title { font-size: 1.3rem; margin: 0; color: var(--cc-head); }
.cc-part-range { margin: 2px 0 10px; font-size: .85rem; color: var(--cc-muted); font-variant-numeric: tabular-nums; }
.cc-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--cc-rule); }
.cc-list li { border-bottom: 1px solid var(--cc-rule); margin: 0; }
.cc-row { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 12px 6px; color: inherit; text-decoration: none; }
.cc-row:hover { background: var(--cc-quote-bg); }
.cc-num { font-variant-numeric: tabular-nums; color: var(--cc-muted); font-size: .95rem; }
.cc-row-main { min-width: 0; }
.cc-row-title { display: block; font-weight: 700; color: var(--cc-head); }
.cc-row-ref { display: block; font-size: .92rem; color: var(--cc-muted); }
.cc-mark { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--cc-muted); opacity: .7; color: var(--cc-on-accent); }
.cc-mark.cc-done { background: var(--cc-accent); border-color: var(--cc-accent); opacity: 1; }
.cc-later { margin: 16px 0 0; color: var(--cc-muted); font-style: italic; }

/* Single session */
.cc-back { display: inline-block; margin: 0 0 16px; font-size: .95rem; }
.cc-passage { margin: 0 0 20px; display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline; font-size: 1.08rem; }
.cc-passage strong { color: var(--cc-head); }
.cc-video { position: relative; aspect-ratio: 16 / 9; max-width: 100%; background: #000; margin: 0 0 24px; }
.cc-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.cc-verse { margin: 24px 0; }
.cc-label + .cc-verse { margin-top: 12px; }
.cc-verse blockquote { margin: 0; padding: 16px 20px; background: var(--cc-quote-bg); border-left: 5px solid var(--cc-accent); font-size: 1.12rem; line-height: 1.55; color: var(--cc-ink); }
.cc-verse figcaption { margin-top: 8px; padding-left: 25px; font-size: .92rem; color: var(--cc-muted); }
.cc-commentary { max-width: 40rem; }
.cc-questions { max-width: 40rem; margin: 0; padding-left: 1.4rem; }
.cc-questions li { margin-bottom: .7em; padding-left: .3rem; }

.cc-root textarea { display: block; width: 100%; min-height: 9rem; padding: 12px; font: inherit; line-height: 1.55; color: var(--cc-ink); background: var(--cc-surface); border: 1px solid var(--cc-muted); border-radius: 2px; resize: vertical; }
.cc-status { margin: 8px 0 0; font-size: .88rem; color: var(--cc-muted); min-height: 1.4em; }

.cc-finish { margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--cc-rule); display: grid; gap: 18px; }
.cc-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cc-pager a, .cc-pager span.cc-off { display: block; padding: 12px 14px; border: 1px solid var(--cc-rule); background: var(--cc-surface); text-decoration: none; color: inherit; min-width: 0; }
.cc-pager a:hover { border-color: var(--cc-accent); }
.cc-pager small { display: block; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--cc-muted); }
.cc-pager b { display: block; color: var(--cc-head); overflow-wrap: anywhere; }
.cc-pager .cc-next-link { text-align: right; }
.cc-pager span.cc-off { color: var(--cc-muted); border-style: dashed; }

.cc-journal-tools { margin-top: 36px; }

@media (max-width: 520px) {
	.cc-pager { grid-template-columns: 1fr; }
	.cc-pager .cc-next-link { text-align: left; }
}
@media (prefers-reduced-motion: reduce) { .cc-bar > i { transition: none; } }

/* Optional dark mode (only when the site owner turns it on). */
@media (prefers-color-scheme: dark) {
	.cc-dark-auto .cc-h1, .cc-dark-auto .cc-part-title, .cc-dark-auto .cc-count,
	.cc-dark-auto .cc-row-title, .cc-dark-auto .cc-passage strong, .cc-dark-auto .cc-pager b { color: var(--cc-head); }
	.cc-root.cc-dark-auto .cc-btn { background: var(--cc-accent) !important; color: var(--cc-on-accent) !important; border-color: var(--cc-accent) !important; }
	.cc-root.cc-dark-auto .cc-btn.cc-secondary { background: transparent !important; color: var(--cc-accent) !important; }
	.cc-root.cc-dark-auto .cc-btn.cc-quiet { background: transparent !important; color: var(--cc-muted) !important; border-color: var(--cc-rule) !important; }
	.cc-dark-auto a { color: var(--cc-accent); }
	.cc-dark-auto .cc-mark.cc-done { color: var(--cc-on-accent); }
}

/* Week view: this week's reading, council note, teaser. */
.cc-readings { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; max-width: 40rem; }
.cc-readings li { display: grid; grid-template-columns: minmax(8.5rem, auto) 1fr auto; align-items: baseline; gap: 6px 14px; padding: 8px 0; border-bottom: 1px solid var(--cc-rule); }
.cc-sess-label { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--cc-muted); font-variant-numeric: tabular-nums; }
.cc-sess-passage { font-weight: 700; color: var(--cc-head); min-width: 0; }
.cc-sess-link { font-size: .85rem; white-space: nowrap; }
.cc-where { max-width: 40rem; color: var(--cc-muted); margin: 0 0 8px; }
.cc-where strong { color: var(--cc-head); }
.cc-council { margin: 8px 0; padding: 4px 20px 16px; background: var(--cc-quote-bg); border-left: 4px solid var(--cc-accent); max-width: 40rem; }
.cc-council .cc-label { border-bottom: none; padding-bottom: 0; margin-top: 16px; }
.cc-council p { margin: 0 0 1em; }
.cc-council p:last-child { margin-bottom: 0; }
.cc-teaser { max-width: 40rem; color: var(--cc-muted); }
.cc-teaser strong { color: var(--cc-head); }
.cc-prose p { margin: 0 0 1em; }

@media (max-width: 520px) {
	.cc-readings li { grid-template-columns: 1fr auto; }
	.cc-sess-label { grid-column: 1 / -1; }
}

/* Sign-in / save-progress callout */
.cc-signin { margin: 20px 0; padding: 16px 20px; background: var(--cc-quote-bg); border-left: 4px solid var(--cc-accent); display: grid; gap: 10px; max-width: 42rem; }
.cc-signin.cc-signed { background: var(--cc-surface); border: 1px solid var(--cc-rule); border-left: 4px solid var(--cc-accent); }
.cc-signin-lead { margin: 0; color: var(--cc-ink); }
.cc-signin-note { margin: 0; color: var(--cc-muted); font-size: .9rem; }
.cc-signin .cc-btn-row { margin-top: 0; }

/* Calendar / reading reminders */
.cc-cal-form { gap: 20px; }
.cc-field { display: grid; gap: 6px; margin: 0; padding: 0; border: 0; }
.cc-field > label, .cc-field legend { font-weight: 700; color: var(--cc-head); padding: 0; }
.cc-field-hint { margin: 0; color: var(--cc-muted); font-size: .9rem; }
.cc-root input[type="date"], .cc-root input[type="time"] { font: inherit; padding: 8px 10px; border: 1px solid var(--cc-muted); border-radius: 2px; background: var(--cc-surface); color: var(--cc-ink); max-width: 16rem; }
.cc-root input[type="date"]:disabled, .cc-root input[type="time"]:disabled { opacity: .5; }
.cc-day-row { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.cc-day { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; color: var(--cc-ink); }
.cc-cal-allday { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; color: var(--cc-muted); margin-top: 8px; }
.cc-cal-form [data-cc-cal-fallback] { margin-top: 8px; }

/* Registration form */
.cc-reg-form { gap: 18px; }
.cc-reg-form input[type="text"], .cc-reg-form input[type="email"] { font: inherit; padding: 10px 12px; border: 1px solid var(--cc-muted); border-radius: 2px; background: var(--cc-surface); color: var(--cc-ink); width: 100%; max-width: 24rem; }
.cc-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.cc-consent label { display: flex; gap: 8px; align-items: flex-start; font-weight: 400; color: var(--cc-ink); }
.cc-consent input[type="checkbox"] { margin-top: 4px; flex: 0 0 auto; }
.cc-notice-ok { border-left-width: 6px; font-weight: 600; }
.cc-cal-link { margin: 0 0 16px; font-size: 1rem; }
.cc-cal-link a { font-weight: 700; }

/* Theme compatibility: some themes (e.g. Gutenverse) float the byline before
   the post title, which pushes the title's first line sideways. On companion
   pages, clear the title below the floated meta so it aligns to the margin. */
body.single-chrocomp_session .entry-title,
body.single-chrocomp_session .post-title,
body.single-chrocomp_session h1.entry-title { clear: both; }

/* ------------------------------------------------------------------ */
/* Introduction page ([chronological_companion_intro])                 */
/* Built only from the shared tokens above, so the optional dark mode   */
/* and the owner's chosen colors both carry through unchanged.          */
/* ------------------------------------------------------------------ */
.cc-intro { max-width: 44rem; }
.cc-intro p { max-width: 40rem; }
.cc-intro-title { margin-bottom: 20px; padding-bottom: 10px; border-bottom: 3px solid var(--cc-accent); }
.cc-intro > p { margin: 0 0 1.25em; }

/* The opening paragraph gets a drop cap. Suppressed on narrow screens,
   where a four-line initial eats the measure. */
@media (min-width: 560px) {
	.cc-intro-lead::first-letter { float: left; font-size: 4.2em; line-height: .82; padding: .06em .09em 0 0; color: var(--cc-head); font-weight: 700; }
}

/* One pull quote, in the same gold-bar treatment as an anchor verse. */
.cc-intro-pull { margin: 1.8em 0; padding: .1em 0 .1em 1.2rem; border-left: 5px solid var(--cc-accent); font-size: 1.45rem; line-height: 1.3; font-weight: 700; color: var(--cc-head); }

/* Diagram cards. */
.cc-intro-fig { margin: 2em 0; padding: 18px 18px 14px; background: var(--cc-surface); border: 1px solid var(--cc-rule); max-width: 42rem; }
.cc-intro-svg { display: block; width: 100%; height: auto; max-width: 100%; }
.cc-intro-fig figcaption { margin-top: 10px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px 14px; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--cc-muted); }
.cc-intro-fig figcaption b { color: var(--cc-head); }

/* Shared SVG ink. */
.cc-i-wander { fill: none; stroke: var(--cc-muted); stroke-width: 2; stroke-dasharray: 3 6; stroke-linecap: round; }
.cc-i-spot { fill: var(--cc-muted); }
.cc-i-zig { fill: none; stroke: var(--cc-muted); stroke-width: 2; }
.cc-i-ot { fill: var(--cc-head); }
.cc-i-nt { fill: var(--cc-accent); }
.cc-i-tag { font-size: 11px; letter-spacing: .08em; fill: var(--cc-muted); }
.cc-i-tag-ot { fill: var(--cc-head); font-weight: 700; }
.cc-i-tag-nt { fill: var(--cc-accent); font-weight: 700; }
.cc-i-heaven { stroke: var(--cc-head); stroke-width: 2; stroke-dasharray: 2 7; stroke-linecap: round; }
.cc-i-earth { stroke: var(--cc-accent); stroke-width: 5; stroke-linecap: round; }
.cc-i-join line { stroke: var(--cc-rule); stroke-width: 2; }
.cc-i-star { fill: var(--cc-head); }

/* The story as one line: a horizontal spine of the plan's parts. Scrolls
   inside its own box on narrow screens so the page never scrolls sideways. */
.cc-intro-track { overflow-x: auto; }
.cc-intro-spine { position: relative; display: flex; align-items: flex-start; gap: 4px; min-width: 30rem; padding-top: 16px; }
.cc-intro-spine::before { content: ""; position: absolute; left: 5%; right: 5%; top: 7px; height: 5px; border-radius: 3px; background: var(--cc-accent); }
.cc-intro-stop { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 9px; text-align: center; }
.cc-intro-dot { width: 15px; height: 15px; margin-top: -16px; border-radius: 50%; background: var(--cc-surface); border: 3px solid var(--cc-head); }
.cc-intro-stop:first-child .cc-intro-dot,
.cc-intro-stop:last-child .cc-intro-dot { background: var(--cc-head); }
.cc-intro-stop-label { font-size: .7rem; line-height: 1.3; letter-spacing: .09em; text-transform: uppercase; color: var(--cc-muted); }

/* The plan at a glance. */
.cc-intro-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: 12px; margin: 2em 0; max-width: 42rem; }
.cc-intro-stats > div { padding: 12px 14px; background: var(--cc-quote-bg); border-top: 3px solid var(--cc-accent); }
.cc-intro-stats b { display: block; font-size: 2rem; line-height: 1.05; color: var(--cc-head); font-variant-numeric: tabular-nums; }
.cc-intro-stats span { display: block; margin-top: 6px; font-size: .68rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--cc-muted); }

/* Every week in the plan, one square each. */
.cc-intro-weeks { display: grid; grid-template-columns: repeat(26, 1fr); gap: 3px; }
.cc-intro-weeks i { display: block; aspect-ratio: 1 / 1; background: var(--cc-head); opacity: .78; }
.cc-intro-weeks i:first-child,
.cc-intro-weeks i:last-child { background: var(--cc-accent); opacity: 1; }

/* The heaven-and-earth note, in the same treatment as a council note. */
.cc-intro-note { margin: 2em 0; padding: 16px 20px 4px; background: var(--cc-quote-bg); border-left: 4px solid var(--cc-accent); max-width: 42rem; }
.cc-intro-note-label { margin: 0 0 12px; font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--cc-head); }
.cc-intro-threads { margin-bottom: 14px; }

/* "Avoid the rabbit holes" — set apart as practical counsel. */
.cc-intro-keep { margin: 2em 0; padding: 16px 20px 4px; background: var(--cc-surface); border: 1px solid var(--cc-rule); max-width: 42rem; }

/* The closing charge. */
.cc-intro-close { margin: 2em 0 0; padding: 20px 22px 6px; background: var(--cc-quote-bg); border-top: 4px solid var(--cc-accent); max-width: 42rem; }
.cc-intro-close p { font-size: 1.15rem; line-height: 1.5; color: var(--cc-head); font-weight: 700; }

@media (max-width: 520px) {
	.cc-intro-pull { font-size: 1.25rem; }
	.cc-intro-stats b { font-size: 1.65rem; }
	.cc-intro-close p { font-size: 1.05rem; }
}

/* Bottom "Back to All Weeks" link, under the week pager. */
.cc-back-bottom { margin: 18px 0 0; }
.cc-back-bottom .cc-back { font-size: .95rem; }

/* Optional human check on the sign-up form. */
.cc-turnstile { margin-top: 4px; }