/* 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-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; }
}

/* 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-cc_session .entry-title,
body.single-cc_session .post-title,
body.single-cc_session h1.entry-title { clear: both; }