/*
 * Crestoria content design system — article template classes.
 * Ported from assets/prototypes/how-to.html (the KB-approved static design).
 *
 * Contract (ARCHITECTURE.md §4.1/4.1b): post content is CORE BLOCKS ONLY,
 * carrying these class names. All visual treatment lives here, in the theme.
 * No <style>, <svg>, or Stackable markup in post content — icons render via
 * CSS mask-image (KSES-safe), step numbers via CSS counters.
 *
 * Block markup contract per component (what the generator/templates emit):
 *   p.cg-pillar-badge                paragraph — pillar name text
 *   .cg-key-takeaways                group: h4 + ul
 *   details.cg-collapsible           core/details (TOC, FAQ items)
 *   details.cg-collapsible.cg-toc    TOC variant (contains an ordered list)
 *   p.cg-intro                       opening paragraph
 *   .cg-steps                        group wrapping .cg-step-card groups
 *   .cg-step-card                    group: h3 + paragraphs (+ .cg-pro-tip)
 *                                    — number badge is a CSS counter, NOT content
 *   .cg-pro-tip                      group: paragraph(s); first <strong> is the label
 *   .cg-faq                          group: h2 + details.cg-collapsible items
 *   .cg-cta-banner                   group: h2 + p + core/buttons
 *   .cg-author-box                   group: paragraphs (label / name / title)
 *   .cg-related-links                group: h4 + ul of links
 *   .cg-chapters                     group wrapping .cg-chapter groups (Pillar Guide)
 *   .cg-chapter                      group: h2 + paragraphs (+ blockquote.cg-pullquote)
 *   .cg-compare-list                  group wrapping .cg-compare-row groups (Comparison)
 *   .cg-compare-row                   group: p (criterion heading) + .cg-compare-cards
 *   .cg-compare-cards                 group: two .cg-compare-card, className
 *                                    cg-side-a|cg-side-b (NOT data-side — see 2026-07-09
 *                                    fix note below) — 2-col grid, 1-col stack under 600px
 *   .cg-compare-card                  group: p.cg-compare-badge (option name, with
 *                                    optional span.cg-score-bar NESTED INSIDE its
 *                                    content, not a sibling) + p (description).
 *                                    Score bar fill is inline style="--score:NN%"
 *                                    (KSES-safe: style attrs survive default post
 *                                    filtering, unlike <style>/<script>). Always pair
 *                                    with descriptive text — illustrative of a general
 *                                    pattern, never a precise universal claim.
 *                                    NO <table> anywhere — see CSS body for why.
 *   .cg-verdict-panel                group wrapping two .cg-verdict-side groups
 *   .cg-verdict-side                 group: h4 + ul — className cg-side-a|cg-side-b
 *                                    per side (NOT data-side)
 *   .cg-timeline                     group wrapping p.cg-timeline-caption (optional,
 *                                    first child) + .cg-milestone groups (Checklist)
 *   p.cg-timeline-caption            orientation line, e.g. "Earliest start →
 *                                    deadline" — countdown milestone labels alone
 *                                    read ambiguous about direction, this fixes it
 *   .cg-milestone                    group: p.cg-milestone-when (eyebrow — a single
 *                                    point in time, e.g. "18 Months Out", NOT a
 *                                    range like "Month 18–12" which reads backwards)
 *                                    + h3 + p + ul.cg-checklist. Dot marker + gold
 *                                    progress-fill overlay are CSS, NOT content —
 *                                    fill position driven by js/cg-timeline-progress.js
 *                                    (theme-enqueued, scroll-based, not post content)
 *   ul.cg-checklist                  plain <ul>, checkbox glyph is a ::before border-box,
 *                                    no icon asset needed. Static (not interactive) —
 *                                    represents "things to do," not a completion state.
 *   .cg-qa-question                   blockquote/group: p (the reader's literal question) —
 *                                    quote icon, surface+gold-border card (Q&A)
 *   .cg-short-answer                  group: p.cg-short-answer-label (eyebrow) +
 *                                    p.cg-intro (the direct answer, first ~50 words —
 *                                    reuses the intro lead-paragraph treatment)
 *   .cg-qa-angles                     group wrapping 3-4 .cg-qa-angle-card groups —
 *                                    2-col grid on desktop, 1-col stack under 600px (Q&A)
 *   .cg-qa-angle-card                 group: h4.cg-icon-NAME + p, className
 *                                    cg-accent-a|cg-accent-b (alternate per card —
 *                                    same --cg-accent-a/b copper/slate pair as
 *                                    Comparison; NOT data-accent/data-icon, see
 *                                    2026-07-09 fix note below). Icon is CSS
 *                                    ::before/::after on the h4 itself — no bare <span>.
 *   .cg-qa-bottom-line                group: p(<strong>Bottom Line</strong>text) —
 *                                    solid gold fill, closing verdict for a Q&A answer
 *   .cg-city-scores                   group wrapping .cg-city-scorecard groups —
 *                                    2-col grid on desktop, 1-col stack under 600px
 *                                    (City Guide)
 *   .cg-city-scorecard                group, className cg-cat-NAME (icon name — ONE
 *                                    class drives icon/border/meter color together):
 *                                    h4 (plain) + p.cg-city-band-label (span.cg-segment-meter,
 *                                    style="--fill:NN%", NESTED INSIDE this paragraph's
 *                                    content, before the band text — not a sibling) +
 *                                    p (justification). NOT a raw decimal score — band
 *                                    label text carries the meaning, meter is
 *                                    illustrative only (5 discrete segments via a
 *                                    repeating CSS mask, same span-plus-inline-style
 *                                    pattern as .cg-score-bar
 *                                    in Comparison)
 *   p.cg-best-for                     paragraph with inline span.cg-best-for-tag
 *                                    children (City Guide overview "Best For" pills)
 *   ul.cg-quick-snapshot               core/list — li.cg-icon-NAME per category
 *                                    (className, NOT data-icon), at-a-glance strip
 *                                    (City Guide overview)
 *   .cg-country-context                group: h4 + ul (li: <strong>Label</strong>
 *                                    value) — factual national policy, NOT scored
 *                                    (City Guide)
 *   ul.cg-budget-list                  core/list — li: span.cg-budget-label +
 *                                    span.cg-budget-value, last li = total row
 *                                    (City Guide Student Essentials; the one place
 *                                    "$" figures are allowed past the pricing-leak
 *                                    quality gate — see pipeline.py check_quality())
 *   .cg-university-cards                group wrapping .cg-university-card groups —
 *                                    2-col grid on desktop, 1-col under 600px
 *   .cg-university-card                 group: h4 + p.cg-university-meta + p + ul
 *                                    (strengths). Real sourced rankings/tuition/
 *                                    acceptance data belongs here — unlike the city
 *                                    scorecards, these figures ARE publicly published
 *                                    per-university, so precision is legitimate once
 *                                    actually researched (see blocks.py university_card())
 *   .cg-city-compare-list                core/list — li.cg-city-compare-row:
 *                                    span.cg-city-compare-name + span.cg-city-compare-tags
 *                                    (span.cg-city-compare-tag children). Stacked rows,
 *                                    NOT a <table> — same anti-pattern lesson as Comparison,
 *                                    more pressing here since 3+ cities means more columns.
 *                                    Reserve for genuinely independent city choices made
 *                                    BEFORE committing to a university — once a reader is
 *                                    anchored to a specific city, use .cg-nearby-alternatives
 *                                    instead (see below).
 *   .cg-nearby-alternatives             group wrapping .cg-nearby-alt-card groups — 2-col
 *                                    grid on desktop, 1-col under 600px. Practical nearby
 *                                    areas relative to a fixed anchor city, each with ONE
 *                                    named advantage badge (p.cg-nearby-alt-badge, e.g.
 *                                    "Lower Rent") + h4 (area name) + p (explanation) —
 *                                    not a multi-tag comparison grid, since the point is a
 *                                    specific, legible tradeoff per option, not a ranking
 *   .cg-overall-score                   group: p.cg-overall-label + p.cg-overall-band +
 *                                    p (explanation). Solid gold fill, same "decisive
 *                                    stamp" language as .cg-qa-bottom-line, scaled up
 *                                    as the page's closing capstone verdict
 *
 * FIX 2026-07-09 — "which variant" attributes (data-side/data-accent/data-icon) were
 * REMOVED everywhere in favor of extra CSS classes (cg-side-a/cg-side-b, cg-accent-a/
 * cg-accent-b, cg-icon-NAME). Real bug, caught twice in the live block editor: a bare
 * data-* attribute on a block's root element is NOT part of that block's registered
 * attribute schema, so Gutenberg's save/validate cycle reconstructs the element
 * WITHOUT it and flags "Block contains unexpected or invalid content." className IS
 * a registered, always-preserved attribute — safe. Same fix applied to bare sibling
 * <span> elements (.cg-score-bar, .cg-segment-meter): they now live INSIDE an
 * adjacent paragraph's own content instead of between recognized child blocks, since
 * a group's save() only replays recognized children, not stray HTML between them —
 * content_engine was regenerated and every affected live post republished same day.
 *
 * Theme-adaptive color strategy: the live site currently runs a DARK Blocksy
 * palette (hard lesson from the first WP push — never assume white). Surfaces
 * and hairlines are mixed from Blocksy's own text color via color-mix(), so
 * every component reads correctly on dark AND light themes without a rewrite.
 * Brand accents (gold/olive) are fixed tokens from config/brand.yaml.
 */

:root {
	/* === Brand tokens — mirrors config/brand.yaml design_tokens === */
	--cg-gold: #C6AA00;
	--cg-gold-dark: #A38900;
	--cg-gold-bright: #DABF2E;   /* hover on dark surfaces */
	--cg-olive: #8A7B29;
	--cg-grey: #B2B2B2;

	/* Two-tone accent pair (introduced 2026-07-08 for Comparison, extended
	   2026-07-09 to the Q&A angle-card grid) — deliberately NOT gold/olive.
	   Those two sit too close in hue for a solid-fill pill/badge/card accent
	   (both read "brownish" at a glance) and gold specifically washes out
	   against the site's dark palette. Copper (warm) vs. slate (cool) gives
	   instant, legible separation on dark AND light. Gold/olive stay reserved
	   for single-accent components (Pro Tip, CTA banner, page-top badges,
	   Key Takeaways) — this pair is specifically for "two or more distinct
	   options/angles side by side" layouts, where gold/olive don't separate. */
	--cg-accent-a: #C97A2B;
	--cg-accent-b: #3E6577;

	/* City Guide per-category palette (2026-07-09, KB) — extends the
	   accent-a/b pair (reused here as Cost of Living / Housing) into a full
	   9-hue set so each scorecard category is visually distinct at a glance,
	   rather than every card sharing one gold accent. All 9 are kept at
	   similar muted, medium-dark saturation/lightness to accent-a/b so they
	   read as one cohesive family (not a rainbow) and so a single icon
	   treatment works uniformly across every card — no per-color contrast
	   decisions needed. Keyed by icon name (the same string already used for
	   .cg-icon-NAME), so category->color is a single lookup, not a second
	   parallel mapping to keep in sync. */
	--cg-cat-graduation-cap: #A6862C; /* Education — deep bronze */
	--cg-cat-wallet: #C97A2B;         /* Cost of Living — copper (= accent-a) */
	--cg-cat-home: #3E6577;           /* Housing — slate (= accent-b) */
	--cg-cat-bus: #4A5A8A;            /* Transportation — muted indigo */
	--cg-cat-shield: #2E6E62;         /* Safety — deep teal */
	--cg-cat-heart-pulse: #A8524A;    /* Healthcare — dusty brick */
	--cg-cat-briefcase: #6B5B95;      /* Employment — muted plum */
	--cg-cat-users: #B2582F;          /* Student Lifestyle — burnt sienna */
	--cg-cat-sun: #4F6B45;            /* Climate — sage green */

	--cg-font-heading: 'Poppins', sans-serif;
	--cg-font-accent: 'Poppins', sans-serif;
	--cg-font-body: 'Inter', sans-serif;

	--cg-radius: 8px;
	--cg-radius-pill: 999px;
}

/* Adaptive neutrals, derived from the active theme's text color so every
   component reads correctly on dark AND light palettes.
   IMPORTANT: these are defined ON THE COMPONENTS, not :root — custom
   properties resolve their var() references where they are DECLARED and
   descendants inherit the resolved value, so declaring these at :root would
   freeze the fallback ink before the theme's --theme-text-color (which some
   setups define below :root) can take effect. */
p.cg-pillar-badge,
.cg-key-takeaways,
details.cg-collapsible,
.cg-steps,
.cg-step-card,
.cg-pro-tip,
.cg-faq,
.cg-author-box,
.cg-related-links,
.cg-chapters,
.cg-chapter,
.cg-compare-list,
.cg-verdict-panel,
.cg-timeline,
.cg-qa-question,
.cg-short-answer,
.cg-qa-angles,
.cg-qa-bottom-line,
.cg-city-scores,
.cg-city-scorecard,
p.cg-best-for,
ul.cg-quick-snapshot,
.cg-country-context,
ul.cg-budget-list,
.cg-university-cards,
.cg-city-compare-list,
.cg-nearby-alternatives,
.cg-icon-checklist,
.cg-overall-score,
.cg-related-content-section {
	--cg-ink: var(--theme-text-color, #2B2B2B);
	--cg-heading-ink: var(--theme-headings-color, var(--cg-ink));
	--cg-surface: color-mix(in srgb, var(--cg-ink) 6%, transparent);
	--cg-border: color-mix(in srgb, var(--cg-ink) 16%, transparent);
	--cg-muted: color-mix(in srgb, var(--cg-ink) 62%, transparent);
	/* Body copy nudged toward the headings color — reads brighter on the
	   dark palette, darker (more contrast) on a light one. */
	--cg-body-ink: color-mix(in srgb, var(--cg-ink) 55%, var(--cg-heading-ink) 45%);
}

/* Brighter body copy inside article components (KB: default was too dim).
   Readability pass 2026-07-08: at the theme's 16px default, the 720px column
   ran 89–93 chars/line (comfort zone is 60–75). 18px/1.7 brings it to ~72
   and gives long-form text room to breathe. */
p.cg-intro,
.cg-step-card p,
.cg-pro-tip p,
details.cg-collapsible p {
	color: var(--cg-body-ink);
	font-size: 18px;
	line-height: 1.7;
}
.cg-key-takeaways li { font-size: 17px; }
.cg-pro-tip p {
	font-size: 16px;
	/* KB-requested fixed near-white; note: assumes the dark palette (no
	   background on this card anymore) — revisit if a light theme ever ships */
	color: #FEFEFE;
}

/* ============ WIDTH DISCIPLINE ============ */
/* Blocksy constrains entry-content children by tagging blocks it recognizes
   (.is-width-constrained → width/max-width/margin auto). Custom-classed
   blocks are skipped, so ours rendered full-bleed on the live post. Apply
   the same constraint ourselves, using Blocksy's own width variables
   (--theme-block-max-width resolves to the post's narrow/normal content
   width; hard px fallbacks in case the vars ever go away). */
/* .is-root-container is the block editor's canvas equivalent of
   .entry-content (add_editor_style prefixes these with
   .editor-styles-wrapper, so the extra selector is inert on the front end).
   Without it, components sprawl full-width while editing. */
.entry-content > :is(.cg-key-takeaways, details.cg-collapsible, p.cg-intro,
	.cg-steps, .cg-faq, .cg-cta-banner, .cg-author-box, .cg-related-links, .cg-chapters,
	.cg-compare-list, .cg-verdict-panel, .cg-timeline, .cg-qa-question, .cg-short-answer,
	.cg-qa-angles, .cg-qa-bottom-line, .cg-city-scores, p.cg-best-for, ul.cg-quick-snapshot,
	.cg-country-context, ul.cg-budget-list, .cg-university-cards, .cg-city-compare-list, .cg-nearby-alternatives, .cg-icon-checklist, .cg-overall-score, .cg-related-content-section),
.is-root-container > :is(.cg-key-takeaways, details.cg-collapsible, p.cg-intro,
	.cg-steps, .cg-faq, .cg-cta-banner, .cg-author-box, .cg-related-links, .cg-chapters,
	.cg-compare-list, .cg-verdict-panel, .cg-timeline, .cg-qa-question, .cg-short-answer,
	.cg-qa-angles, .cg-qa-bottom-line, .cg-city-scores, p.cg-best-for, ul.cg-quick-snapshot,
	.cg-country-context, ul.cg-budget-list, .cg-university-cards, .cg-city-compare-list, .cg-nearby-alternatives, .cg-icon-checklist, .cg-overall-score, .cg-related-content-section) {
	box-sizing: border-box;
	/* Blocksy has NO container side padding — mobile/tablet gutters are baked
	   into the child width itself (--theme-container-width = min(100%, ~90vw)).
	   width:100% here would print components edge-to-edge on small screens. */
	width: var(--theme-container-width, 100%) !important;
	/* !important added 2026-07-09: a post's individual Blocksy "Content Width"
	   setting (Normal/Wide/Full — set per-post, defaults may differ for newly
	   REST-created posts vs. ones authored in the editor) can emit its own
	   higher-specificity max-width rule on .entry-content itself, overriding
	   this one and causing full-bleed overflow — reported on the first City
	   Guide post (pills/scorecards/paragraphs all ran off the right edge on a
	   normal-width desktop browser). Forcing our own value wins regardless of
	   that per-post setting, same defensive pattern already used on the badge's
	   margin-inline-start below for the same class of Blocksy override. */
	max-width: min(100%, var(--theme-block-max-width, var(--theme-narrow-container-max-width, 750px))) !important;
	margin-inline: auto;
}
/* The badge is a shrink-wrapped pill — same technique Blocksy uses for
   .alignleft: hug content, but align to the content column's left edge. */
.entry-content > p.cg-pillar-badge,
.is-root-container > p.cg-pillar-badge {
	width: fit-content;
	/* !important needed: WP core's layout engine emits
	   `margin-left/right: auto !important` for children of
	   .is-layout-constrained, which zeroes the start margin on this
	   inline-flex box and pins the pill to the container's far-left edge.
	   Same specificity trick, same column math as the other components. */
	/* Mirror the siblings' effective width (container width capped at column
	   max) so the pill's left edge lines up with them at every breakpoint,
	   including the 5vw mobile gutter. */
	margin-inline-start: calc((100% - min(var(--theme-container-width, 100%), var(--theme-block-max-width, var(--theme-narrow-container-max-width, 750px)))) / 2) !important;
	margin-inline-end: 0 !important;
}

/* ============ ICON PRIMITIVE (Lucide, via mask — KSES-safe) ============ */
/* Icons are ::before/::after pseudo-elements: a solid box the color of
   currentColor, clipped by the icon's silhouette. Post content never
   contains SVG. Source files: assets/icons/*.svg (Lucide). */
.cg-key-takeaways :is(h2, h4)::before,
.cg-pro-tip::before,
details.cg-collapsible > summary::after,
.cg-faq h2::before,
.cg-author-box::before,
.cg-related-links li::before {
	content: "";
	display: inline-block;
	flex-shrink: 0;
	background-color: currentColor;
	-webkit-mask: var(--cg-icon) no-repeat center / contain;
	mask: var(--cg-icon) no-repeat center / contain;
}

/* ============ PILLAR BADGE ============ */
p.cg-pillar-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--cg-surface);
	border: 1px solid var(--cg-border);
	color: var(--cg-olive);
	font-family: var(--cg-font-accent);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 6px 14px;
	border-radius: var(--cg-radius-pill);
	margin-bottom: 8px;
}

/* ============ KEY TAKEAWAYS (citability header — every template) ============ */
.cg-key-takeaways {
	margin: 36px 0;
	background: var(--cg-surface);
	border-left: 4px solid var(--cg-gold);
	border-radius: var(--cg-radius);
	padding: 22px 24px;
}
/* :is(h2, h4): the generator emits h2 as of 2026-07-12 (task #124 — h4
   directly after the post's h1 was a document-outline skip on every post);
   h4 stays matched so not-yet-regenerated content renders identically.
   line-height is pinned because it was the ONE property inherited from the
   element default (h4 computed 1.5 live) — an h2 default could differ. */
.cg-key-takeaways :is(h2, h4) {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--cg-font-accent);
	font-weight: 700;
	font-size: 13px;
	line-height: 1.5;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cg-olive);
	margin: 0 0 12px 0;
}
.cg-key-takeaways :is(h2, h4)::before {
	--cg-icon: var(--cg-icon-lightbulb);
	width: 20px;
	height: 20px;
	color: var(--cg-gold);
}
.cg-key-takeaways ul {
	margin: 0;
	padding-left: 20px;
}
.cg-key-takeaways li {
	margin-bottom: 8px;
	/* headings ink = white on the dark palette, near-black on light —
	   "just white" per KB, without breaking light mode */
	color: var(--cg-heading-ink);
}
.cg-key-takeaways li:last-child { margin-bottom: 0; }

/* ============ COLLAPSIBLE (core/details) ============ */
details.cg-collapsible {
	border: 1px solid color-mix(in srgb, var(--cg-ink) 26%, transparent);
	border-radius: var(--cg-radius);
	margin-bottom: 12px;
	overflow: hidden;
}
details.cg-collapsible > summary {
	cursor: pointer;
	list-style: none;
	padding: 16px 18px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	font-family: var(--cg-font-accent);
	font-weight: 600;
	font-size: 16px;
	color: var(--cg-heading-ink);
	background: var(--cg-surface);
	/* margin 0 matters: Blocksy's flow-layout rule adds margin-block-end to
	   every child of an is-layout-flow container — on a CLOSED details that
	   margin sits inside the border as a phantom strip below the summary. */
	margin: 0;
	transition: background 0.15s ease;
}
details.cg-collapsible > summary:hover {
	background: color-mix(in srgb, var(--cg-ink) 11%, transparent);
}
details.cg-collapsible > summary::-webkit-details-marker { display: none; }
details.cg-collapsible > summary::after {
	--cg-icon: var(--cg-icon-chevron-down);
	width: 18px;
	height: 18px;
	color: var(--cg-gold);
	transition: transform 0.2s ease;
}
details.cg-collapsible[open] > summary::after { transform: rotate(180deg); }
details.cg-collapsible > :not(summary) {
	padding-left: 18px;
	padding-right: 18px;
}
details.cg-collapsible > :nth-child(2) { padding-top: 16px; }
details.cg-collapsible > :last-child { padding-bottom: 20px; margin-bottom: 0; }

details.cg-toc ol {
	margin: 0;
	padding-left: 38px;
}
details.cg-toc li { margin-bottom: 6px; }
details.cg-toc a { text-decoration: none; color: var(--cg-olive); }
details.cg-toc a:hover { text-decoration: underline; color: var(--cg-gold-dark); }

/* ============ INTRO ============ */
p.cg-intro {
	font-size: 20px !important; /* lead paragraph sits above the 18px body */
	line-height: 1.65;
	margin: 32px 0 44px 0;
}

/* ============ STEPS — visual signature of the How-To template ============ */
/* Gold numbered badge is a pure CSS counter on the card: no number appears
   in post content, so steps can be reordered in the editor and renumber
   themselves automatically. */
.cg-steps {
	counter-reset: cg-step;
	margin-bottom: 56px;
}
.cg-step-card {
	counter-increment: cg-step;
	display: grid;
	grid-template-columns: 44px 1fr;
	column-gap: 18px;
	padding: 36px 0;
	border-bottom: 1px solid var(--cg-border);
	margin: 0;
}
.cg-step-card:last-child { border-bottom: none; }
.cg-step-card::before {
	content: counter(cg-step);
	grid-column: 1;
	grid-row: 1 / span 20;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--cg-gold);
	color: #2B2B2B; /* charcoal on gold — white failed contrast (KB) */
	font-family: var(--cg-font-accent);
	font-weight: 800;
	font-size: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.cg-step-card > * { grid-column: 2; }
.cg-step-card h3 {
	font-family: var(--cg-font-heading);
	font-size: 22px;
	font-weight: 600;
	line-height: 1.3;
	margin: 7px 0 12px 0; /* optically centers the first line against the badge */
}
.cg-step-card p { margin: 0 0 1.15em 0; }
.cg-step-card > p:last-child { margin-bottom: 0; }

/* ============ PRO TIP ============ */
/* Grid, not flex: in the editor, inner blocks sit inside a wrapper div, and
   on the front end paragraphs are direct children — a spanning ::before in
   column 1 with everything else forced to column 2 works in BOTH DOMs
   (same lesson as the step-card flex bug). */
.cg-pro-tip {
	display: grid;
	grid-template-columns: 22px 1fr;
	column-gap: 12px;
	background: none;
	border: 1px solid var(--cg-gold-bright);
	border-left: 4px solid var(--cg-gold-bright);
	border-radius: var(--cg-radius);
	padding: 16px 18px;
	margin-top: 28px;
	font-size: 15px;
}
.cg-pro-tip::before {
	--cg-icon: var(--cg-icon-zap);
	grid-column: 1;
	grid-row: 1 / span 20;
	width: 22px;
	height: 22px;
	margin-top: 1px;
	color: var(--cg-gold);
}
.cg-pro-tip > * { grid-column: 2; }
.cg-pro-tip p { margin: 0 0 0.6em 0; }
.cg-pro-tip p:last-child { margin-bottom: 0; }
.cg-pro-tip strong {
	font-family: var(--cg-font-accent);
	font-weight: 700;
	font-size: 15px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--cg-gold);
	display: block;
	margin-bottom: 6px;
}

/* ============ QA QUESTION — visual signature of the Q&A template ============ */
/* KB-chosen option: question as a styled quote/callout, answer flows as
   normal body text below. Deliberately distinct from .cg-pullquote (that one
   is border-only/no-background editorial emphasis lifted FROM the body) —
   this is the reader's literal submitted question, so it gets a contained
   card: surface background + gold left border, same family as
   .cg-key-takeaways but with the quote icon in place of the lightbulb. */
.cg-qa-question {
	margin: 32px 0 0 0;
	background: var(--cg-surface);
	border-left: 4px solid var(--cg-gold);
	border-radius: var(--cg-radius);
	padding: 24px 28px;
}
.cg-qa-question::before {
	--cg-icon: var(--cg-icon-quote);
	content: "";
	display: block;
	width: 24px;
	height: 24px;
	background-color: var(--cg-gold);
	-webkit-mask: var(--cg-icon) no-repeat center / contain;
	mask: var(--cg-icon) no-repeat center / contain;
	margin-bottom: 12px;
	opacity: 0.85;
}
.cg-qa-question p {
	font-family: var(--cg-font-heading);
	font-weight: 300;
	font-size: 24px !important;
	line-height: 1.4 !important;
	color: var(--cg-heading-ink);
	margin: 0 !important;
}

/* ============ SHORT ANSWER — the "first 50 words" citability lead ============ */
/* Eyebrow label (same uppercase-pill typography language as the badge) +
   the answer itself reuses p.cg-intro's oversized lead-paragraph treatment,
   so the direct answer visually reads as the most important sentence on the
   page — exactly what an LLM/snippet extractor should lift first. */
.cg-short-answer { margin: 28px 0 40px 0; }
.cg-short-answer-label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--cg-font-accent);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cg-olive);
	margin: 0 0 10px 0 !important;
}
.cg-short-answer-label::before {
	--cg-icon: var(--cg-icon-zap);
	content: "";
	display: inline-block;
	width: 16px;
	height: 16px;
	background-color: var(--cg-gold);
	-webkit-mask: var(--cg-icon) no-repeat center / contain;
	mask: var(--cg-icon) no-repeat center / contain;
}
.cg-short-answer p.cg-intro { margin: 0 !important; }

/* ============ QA ANGLE GRID — visual signature of the Q&A template ============ */
/* Replaces plain prose H2 sections for the elaboration part of a Q&A
   answer (2026-07-09 redesign, KB: first pass "read like a dating site" and
   was visually flat). A rich, open-ended Q&A answer is inherently
   multi-angle, so the layout makes that legible at a glance: a 2-column
   grid of cards, each with a colored icon badge.
   Accent color REVISED 2026-07-09 (KB): first pass alternated gold/olive,
   but KB called those two too close/muted to read as distinct card accents
   (the exact problem that made --cg-accent-a/b necessary for Comparison in
   the first place). Switched to the same --cg-accent-a/b (copper/slate)
   pair — gold/olive stay reserved for single-accent components elsewhere on
   this template (Pro Tip, Bottom Line, CTA banner, page-top badge).
   Collapses to 1 column under the mobile breakpoint, same technique as
   .cg-compare-cards. */
.cg-qa-angles {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin: 40px 0;
}
@media (max-width: 600px) {
	.cg-qa-angles { grid-template-columns: 1fr; }
}
.cg-qa-angle-card {
	background: var(--cg-surface);
	border: 1px solid var(--cg-border);
	border-top: 3px solid var(--cg-accent-a);
	border-radius: var(--cg-radius);
	padding: 24px;
}
.cg-qa-angle-card.cg-accent-b { border-top-color: var(--cg-accent-b); }
/* Icon badge lives entirely on the h4 via ::before (circle) + ::after (icon mask),
   NOT a separate <span> child — matches every other icon in this system (they all
   attach to a real, already-block-wrapped element). See qa_angle_card() in
   content_engine/blocks.py for why a bare span broke Gutenberg's validation. */
.cg-qa-angle-card h4 {
	position: relative;
	padding-top: 60px;
	font-family: var(--cg-font-heading);
	font-size: 18px;
	font-weight: 600;
	margin: 0 0 8px 0;
	color: var(--cg-heading-ink);
}
.cg-qa-angle-card h4::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--cg-accent-a);
}
.cg-qa-angle-card.cg-accent-b h4::before { background: var(--cg-accent-b); }
.cg-qa-angle-card h4::after {
	content: "";
	position: absolute;
	top: 11px;
	left: 11px;
	width: 22px;
	height: 22px;
	background-color: #FFFFFF; /* white icon on copper/slate — matches .cg-compare-badge's contrast choice, since slate is too dark for the charcoal knockout used on gold/olive elsewhere */
	-webkit-mask: var(--cg-icon) no-repeat center / contain;
	mask: var(--cg-icon) no-repeat center / contain;
}
.cg-qa-angle-card h4.cg-icon-compass::after { --cg-icon: var(--cg-icon-compass); }
.cg-qa-angle-card h4.cg-icon-clock::after { --cg-icon: var(--cg-icon-clock); }
.cg-qa-angle-card h4.cg-icon-graduation-cap::after { --cg-icon: var(--cg-icon-graduation-cap); }
.cg-qa-angle-card h4.cg-icon-message-circle::after { --cg-icon: var(--cg-icon-message-circle); }
.cg-qa-angle-card p {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--cg-body-ink);
}

/* ============ QA BOTTOM LINE — the closing, actionable verdict ============ */
/* Solid gold fill (not just a border, unlike Pro Tip) so the final answer
   reads as a decisive stamp closing out the multi-angle discussion above,
   distinct from the advisory Pro Tip box used mid-article elsewhere. */
.cg-qa-bottom-line {
	display: grid;
	grid-template-columns: 26px 1fr;
	column-gap: 14px;
	background: var(--cg-gold);
	border-radius: var(--cg-radius);
	padding: 22px 24px;
	margin: 40px 0;
}
.cg-qa-bottom-line::before {
	--cg-icon: var(--cg-icon-compass);
	content: "";
	grid-column: 1;
	grid-row: 1 / span 20;
	width: 26px;
	height: 26px;
	margin-top: 2px;
	background-color: #2B2B2B;
	-webkit-mask: var(--cg-icon) no-repeat center / contain;
	mask: var(--cg-icon) no-repeat center / contain;
}
.cg-qa-bottom-line > * { grid-column: 2; }
.cg-qa-bottom-line strong {
	display: block;
	font-family: var(--cg-font-accent);
	font-weight: 800;
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #2B2B2B;
	margin-bottom: 6px;
}
.cg-qa-bottom-line p {
	margin: 0;
	color: #2B2B2B;
	font-size: 16px;
	line-height: 1.6;
}

/* ============ CITY SCORECARD — visual signature of the City Guide template ============ */
/* KB-approved concept (option B of three mockups, 2026-07-09): a segmented
   meter, not a continuous gauge or a raw decimal. Deliberately discrete —
   it reads as "4 of 5 filled," never implies false decimal precision like
   an "8.4/10" figure would. Score meaning comes from the band LABEL text
   (e.g. "Very Good"), not the color. Colors REVISED 2026-07-09 (KB): first
   pass used a single gold accent everywhere; KB asked for the accent-a/b
   two-tone pair "extended so each part has a unique colour." Now a 9-hue
   --cg-cat-* palette (defined in :root above), one per category, all kept
   at similar muted/medium-dark saturation so the set reads as one cohesive
   family rather than a rainbow — see docs/CONTENT-STRATEGY.md for the
   score-band methodology (Excellent/Very Good/Good/Mixed/Significant
   Challenges) the band label text (not the color) actually communicates. */
.cg-city-scores {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	margin: 40px 0;
}
@media (max-width: 600px) {
	.cg-city-scores { grid-template-columns: 1fr; }
}
.cg-city-scorecard {
	background: var(--cg-surface);
	border: 1px solid var(--cg-border);
	border-top: 3px solid var(--cg-gold);
	border-radius: var(--cg-radius);
	padding: 24px;
}
.cg-city-scorecard h4 {
	position: relative;
	padding-left: 32px;
	min-height: 24px;
	display: flex;
	align-items: center;
	font-family: var(--cg-font-heading);
	font-size: 17px;
	font-weight: 600;
	margin: 0 0 14px 0;
	color: var(--cg-heading-ink);
}
.cg-city-scorecard h4::before {
	content: "";
	position: absolute;
	left: 0;
	width: 22px;
	height: 22px;
	background-color: var(--cg-gold);
	-webkit-mask: var(--cg-icon) no-repeat center / contain;
	mask: var(--cg-icon) no-repeat center / contain;
}
/* Segmented meter: a single empty span (same KSES-safe pattern as
   .cg-score-bar in the Comparison template), --fill set inline as a percent.
   Five discrete blocks are carved out of the fill via a repeating mask,
   rather than laying out five separate elements. */
/* GENERIC — not scoped to .cg-city-scorecard. Real bug caught 2026-07-09:
   scoping this to .cg-city-scorecard .cg-segment-meter meant the Overall
   Score capstone's reused meter (nested under .cg-overall-score instead)
   got NONE of this base styling — rendered at zero width, invisible.
   Contexts that use this component set their own size (see
   .cg-overall-score .cg-overall-label .cg-segment-meter below). */
.cg-segment-meter {
	position: relative;
	display: block;
	height: 10px;
	border-radius: var(--cg-radius-pill);
	background: var(--cg-border);
	overflow: hidden;
	margin-bottom: 12px;
}
.cg-segment-meter::before {
	content: "";
	position: absolute;
	inset: 0;
	width: var(--fill);
	background: var(--cg-gold);
	-webkit-mask-image: repeating-linear-gradient(to right, #000 0, #000 calc(20% - 4px), transparent calc(20% - 4px), transparent 20%);
	mask-image: repeating-linear-gradient(to right, #000 0, #000 calc(20% - 4px), transparent calc(20% - 4px), transparent 20%);
}
/* Per-category color: ONE class on the card itself drives icon selection,
   border accent, and meter fill together via descendant selectors — no
   need to stamp a matching class on every inner element separately. */
.cg-city-scorecard.cg-cat-graduation-cap { border-top-color: var(--cg-cat-graduation-cap); }
.cg-city-scorecard.cg-cat-graduation-cap h4::before { --cg-icon: var(--cg-icon-graduation-cap); background-color: var(--cg-cat-graduation-cap); }
.cg-city-scorecard.cg-cat-graduation-cap .cg-segment-meter::before { background: var(--cg-cat-graduation-cap); }
.cg-city-scorecard.cg-cat-wallet { border-top-color: var(--cg-cat-wallet); }
.cg-city-scorecard.cg-cat-wallet h4::before { --cg-icon: var(--cg-icon-wallet); background-color: var(--cg-cat-wallet); }
.cg-city-scorecard.cg-cat-wallet .cg-segment-meter::before { background: var(--cg-cat-wallet); }
.cg-city-scorecard.cg-cat-home { border-top-color: var(--cg-cat-home); }
.cg-city-scorecard.cg-cat-home h4::before { --cg-icon: var(--cg-icon-home); background-color: var(--cg-cat-home); }
.cg-city-scorecard.cg-cat-home .cg-segment-meter::before { background: var(--cg-cat-home); }
.cg-city-scorecard.cg-cat-bus { border-top-color: var(--cg-cat-bus); }
.cg-city-scorecard.cg-cat-bus h4::before { --cg-icon: var(--cg-icon-bus); background-color: var(--cg-cat-bus); }
.cg-city-scorecard.cg-cat-bus .cg-segment-meter::before { background: var(--cg-cat-bus); }
.cg-city-scorecard.cg-cat-shield { border-top-color: var(--cg-cat-shield); }
.cg-city-scorecard.cg-cat-shield h4::before { --cg-icon: var(--cg-icon-shield); background-color: var(--cg-cat-shield); }
.cg-city-scorecard.cg-cat-shield .cg-segment-meter::before { background: var(--cg-cat-shield); }
.cg-city-scorecard.cg-cat-heart-pulse { border-top-color: var(--cg-cat-heart-pulse); }
.cg-city-scorecard.cg-cat-heart-pulse h4::before { --cg-icon: var(--cg-icon-heart-pulse); background-color: var(--cg-cat-heart-pulse); }
.cg-city-scorecard.cg-cat-heart-pulse .cg-segment-meter::before { background: var(--cg-cat-heart-pulse); }
.cg-city-scorecard.cg-cat-briefcase { border-top-color: var(--cg-cat-briefcase); }
.cg-city-scorecard.cg-cat-briefcase h4::before { --cg-icon: var(--cg-icon-briefcase); background-color: var(--cg-cat-briefcase); }
.cg-city-scorecard.cg-cat-briefcase .cg-segment-meter::before { background: var(--cg-cat-briefcase); }
.cg-city-scorecard.cg-cat-users { border-top-color: var(--cg-cat-users); }
.cg-city-scorecard.cg-cat-users h4::before { --cg-icon: var(--cg-icon-users); background-color: var(--cg-cat-users); }
.cg-city-scorecard.cg-cat-users .cg-segment-meter::before { background: var(--cg-cat-users); }
.cg-city-scorecard.cg-cat-sun { border-top-color: var(--cg-cat-sun); }
.cg-city-scorecard.cg-cat-sun h4::before { --cg-icon: var(--cg-icon-sun); background-color: var(--cg-cat-sun); }
.cg-city-scorecard.cg-cat-sun .cg-segment-meter::before { background: var(--cg-cat-sun); }
.cg-city-scorecard .cg-city-band-label {
	font-family: var(--cg-font-accent);
	font-weight: 700;
	font-size: 15px;
	letter-spacing: 0.02em;
	color: var(--cg-olive);
	margin: 0 0 10px 0 !important;
}
.cg-city-scorecard p:not(.cg-city-band-label) {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--cg-body-ink);
}

/* ============ BEST FOR TAGS (City Guide overview) ============ */
/* Multiple inline spans inside ONE wp:paragraph — same "inline content is
   safe, a bare unwrapped block-level element is not" rule as .cg-arrow
   inside .cg-timeline-caption. display:flex on the <p> turns its inline
   span children into wrapping pill rows. */
p.cg-best-for {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	min-width: 0;
	/* margin-block, NOT the "margin" shorthand — real bug: "margin: 16px 0
	   !important" also zeroes margin-left/right at !important priority,
	   which stomped the shared width-constraint rule's margin-inline:auto
	   (needed to CENTER this component in the narrow column) and pinned it
	   to the left edge of its actual (wider) containing block instead —
	   this is what read as "bad alignment" in KB's screenshot. */
	margin-block: 16px !important;
}
.cg-best-for-tag {
	display: inline-flex;
	align-items: center;
	background: var(--cg-surface);
	border: 1px solid var(--cg-border);
	color: var(--cg-olive);
	font-family: var(--cg-font-accent);
	font-weight: 600;
	font-size: 13px;
	padding: 6px 14px;
	border-radius: var(--cg-radius-pill);
}

/* ============ QUICK SNAPSHOT (at-a-glance strip, City Guide overview) ============ */
/* core/list, NOT a custom group — every <li> is already its own valid
   wp:list-item block, so icons attach safely via ::before same as
   .cg-related-links li::before elsewhere in this file. */
ul.cg-quick-snapshot {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	list-style: none;
	min-width: 0;
	/* margin-block, not the "margin" shorthand — same real bug as
	   p.cg-best-for above: the shorthand zeroed margin-inline at !important
	   priority, stomping the shared rule's centering margin-inline:auto. */
	margin-block: 24px !important;
	padding: 0 !important;
}
.cg-quick-snapshot li {
	display: flex;
	align-items: center;
	gap: 8px;
	background: var(--cg-surface);
	border: 1px solid var(--cg-border);
	border-radius: var(--cg-radius-pill);
	padding: 8px 14px;
	font-size: 14px;
	color: var(--cg-body-ink);
	margin: 0;
}
.cg-quick-snapshot li::before {
	content: "";
	display: inline-block;
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	background-color: var(--cg-gold);
	-webkit-mask: var(--cg-icon) no-repeat center / contain;
	mask: var(--cg-icon) no-repeat center / contain;
}
.cg-quick-snapshot li.cg-icon-home::before { --cg-icon: var(--cg-icon-home); }
.cg-quick-snapshot li.cg-icon-wallet::before { --cg-icon: var(--cg-icon-wallet); }
.cg-quick-snapshot li.cg-icon-bus::before { --cg-icon: var(--cg-icon-bus); }
.cg-quick-snapshot li.cg-icon-shield::before { --cg-icon: var(--cg-icon-shield); }
.cg-quick-snapshot li.cg-icon-heart-pulse::before { --cg-icon: var(--cg-icon-heart-pulse); }
.cg-quick-snapshot li.cg-icon-briefcase::before { --cg-icon: var(--cg-icon-briefcase); }
.cg-quick-snapshot li.cg-icon-users::before { --cg-icon: var(--cg-icon-users); }
.cg-quick-snapshot li.cg-icon-sun::before { --cg-icon: var(--cg-icon-sun); }
.cg-quick-snapshot li.cg-icon-graduation-cap::before { --cg-icon: var(--cg-icon-graduation-cap); }
.cg-quick-snapshot li strong {
	color: var(--cg-heading-ink);
	font-weight: 700;
}

/* ============ FACT BOX (factual, not scored — City Guide) ============ */
/* Olive left-border, not gold — deliberately distinct from the scored
   components so "reference fact" reads visually different from "city-level
   judgment call." Shared by Country Context (icon fixed to map-pin) and any
   other practical-facts block (Working While Studying, Graduation Options)
   via content_engine.templates.fact_box() — icon is a className, not the
   original hardcoded map-pin, so any --cg-icon-* can be used here.
   Spacing/type size REVISED 2026-07-09 (KB): first pass read as cramped and
   "tiny to read" on Working While Studying / Graduation Options specifically
   — more margin around the box, more padding per row, and a full step up
   in body font size (15px -> 16.5px, matching the ~18px used for intro/step
   text elsewhere rather than sitting a full size below it). */
.cg-country-context {
	margin: 44px 0;
	background: var(--cg-surface);
	border-left: 4px solid var(--cg-olive);
	border-radius: var(--cg-radius);
	padding: 28px 26px;
}
.cg-country-context h4 {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--cg-font-accent);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cg-olive);
	margin: 0 0 18px 0;
}
.cg-country-context h4::before {
	content: "";
	display: inline-block;
	width: 18px;
	height: 18px;
	background-color: var(--cg-olive);
	-webkit-mask: var(--cg-icon) no-repeat center / contain;
	mask: var(--cg-icon) no-repeat center / contain;
}
.cg-country-context h4.cg-icon-map-pin::before { --cg-icon: var(--cg-icon-map-pin); }
.cg-country-context h4.cg-icon-briefcase::before { --cg-icon: var(--cg-icon-briefcase); }
.cg-country-context h4.cg-icon-graduation-cap::before { --cg-icon: var(--cg-icon-graduation-cap); }
.cg-country-context ul {
	margin: 0;
	padding-left: 0;
	list-style: none;
}
.cg-country-context li {
	padding: 16px 0;
	border-bottom: 1px solid var(--cg-border);
	font-size: 16.5px;
	line-height: 1.65;
	color: var(--cg-body-ink);
}
.cg-country-context li:first-child { padding-top: 0; }
.cg-country-context li:last-child { border-bottom: none; padding-bottom: 0; }
.cg-country-context li strong {
	color: var(--cg-heading-ink);
	font-weight: 600;
	margin-right: 6px;
}

/* ============ BUDGET LIST (Student Essentials, City Guide) ============ */
/* A receipt-style list, not a <table> — same lesson as the Comparison
   template's rejected scrolling table. Two inline spans per <li> (label +
   value) are safe: they're inline content inside one already-valid
   wp:list-item, the same pattern as .cg-budget-label/.cg-budget-value. */
ul.cg-budget-list {
	margin: 20px 0;
	border: 1px solid var(--cg-border);
	border-radius: var(--cg-radius);
	overflow: hidden;
	list-style: none;
	padding: 0 !important;
}
.cg-budget-list li {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 18px;
	border-bottom: 1px solid var(--cg-border);
	font-size: 15px;
	margin: 0;
}
.cg-budget-list li:last-child {
	border-bottom: none;
	background: var(--cg-surface);
	font-weight: 700;
}
.cg-budget-list .cg-budget-label { color: var(--cg-body-ink); }
.cg-budget-list .cg-budget-value { font-weight: 600; color: var(--cg-heading-ink); }

/* ============ UNIVERSITY CARDS (City Guide) ============ */
/* Real, sourced figures belong here (published rankings/tuition/acceptance
   rate), unlike the qualitative-only city scorecards above — see
   content_engine/blocks.py university_card() for the sourcing note. */
.cg-university-cards {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	margin: 32px 0;
}
@media (max-width: 600px) {
	.cg-university-cards { grid-template-columns: 1fr; }
}
.cg-university-card {
	background: var(--cg-surface);
	border: 1px solid var(--cg-border);
	border-top: 3px solid var(--cg-gold);
	border-radius: var(--cg-radius);
	padding: 22px;
}
.cg-university-card h4 {
	font-family: var(--cg-font-heading);
	font-size: 18px;
	font-weight: 600;
	margin: 0 0 6px 0;
	color: var(--cg-heading-ink);
}
.cg-university-card p.cg-university-meta {
	font-size: 13px;
	color: var(--cg-muted);
	margin: 0 0 12px 0 !important;
}
.cg-university-card p {
	font-size: 14px;
	color: var(--cg-body-ink);
	margin: 0 0 10px 0;
}
.cg-university-card ul {
	margin: 8px 0 0 0;
	padding-left: 18px;
}
.cg-university-card li {
	font-size: 14px;
	color: var(--cg-body-ink);
	margin-bottom: 4px;
}

/* ============ CITY COMPARISON LIST (City Guide) ============ */
/* Stacked rows, not a <table> — the same rejected-anti-pattern lesson from
   Comparison applies here even more directly, since this compares 3+
   cities, not 2 (a table would be even more scroll-prone on mobile). */
.cg-city-compare-list { margin: 32px 0; list-style: none; padding: 0 !important; }
.cg-city-compare-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	padding: 16px 0;
	border-bottom: 1px solid var(--cg-border);
	margin: 0;
}
.cg-city-compare-list li:last-child { border-bottom: none; }
.cg-city-compare-name {
	font-family: var(--cg-font-heading);
	font-weight: 600;
	font-size: 16px;
	color: var(--cg-heading-ink);
	min-width: 110px;
}
.cg-city-compare-tags {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}
.cg-city-compare-tag {
	font-size: 13px;
	color: var(--cg-olive);
	background: var(--cg-surface);
	border: 1px solid var(--cg-border);
	border-radius: var(--cg-radius-pill);
	padding: 4px 10px;
}

/* ============ NEARBY ALTERNATIVES (City Guide) ============ */
/* ADDED 2026-07-09 (KB): the original .cg-city-compare-list (above) compares
   independent, far-apart cities side by side, which reads as "which wins"
   with no clear answer — and KB pointed out it's not practical anyway once
   a student is anchored to a specific university: nobody weighs Tokyo vs.
   Fukuoka after they've already chosen a Tokyo school. What's actually
   useful is nearby, commutable areas that trade a specific, named
   advantage against the city center. Each card leads with ONE clear
   advantage badge (Lower Rent / Best Livability / More Space for the
   Money), not a multi-tag comparison grid, so there's never ambiguity
   about what a given alternative is actually offering. .cg-city-compare-list
   stays available for the rare case of genuinely independent city choices
   made BEFORE committing to a university. */
.cg-nearby-alternatives {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	margin: 32px 0;
}
@media (max-width: 600px) {
	.cg-nearby-alternatives { grid-template-columns: 1fr; }
}
.cg-nearby-alt-card {
	background: var(--cg-surface);
	border: 1px solid var(--cg-border);
	border-top: 3px solid var(--cg-gold);
	border-radius: var(--cg-radius);
	padding: 22px;
}
.cg-nearby-alt-card h4 {
	font-family: var(--cg-font-heading);
	font-size: 18px;
	font-weight: 600;
	margin: 0 0 10px 0;
	color: var(--cg-heading-ink);
}
.cg-nearby-alt-badge {
	display: inline-flex;
	background: var(--cg-gold);
	color: #2B2B2B;
	font-family: var(--cg-font-accent);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 5px 12px;
	border-radius: var(--cg-radius-pill);
	margin: 0 0 12px 0 !important;
}
.cg-nearby-alt-card p:not(.cg-nearby-alt-badge) {
	font-size: 15px;
	line-height: 1.6;
	color: var(--cg-body-ink);
	margin: 0;
}

/* ============ ICON CHECKLIST (City Guide — e.g. Visa Requirements) ============ */
/* ADDED 2026-07-09 (KB): the plain ul.cg-checklist (empty-square glyph,
   built for sequential Checklist-template steps) read as flat and
   unfinished here — "a bulleted list without bullets" — for content where
   each item is a distinct, independent requirement rather than an ordered
   step. A 2-col grid of small icon-badge cards instead: one requirement
   per card, each with its own icon-in-circle, matching the visual language
   already established for the scorecards/nearby-alternatives above rather
   than inventing a new idiom. */
.cg-icon-checklist {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px;
	margin: 28px 0;
}
@media (max-width: 600px) {
	.cg-icon-checklist { grid-template-columns: 1fr; }
}
/* Opt-in single column (2026-07-11, Explainer template) — see icon_checklist()'s
   stack= docstring in templates.py for why: longer item text wrapping to two
   lines broke the 2-column grid's per-row equal-height alignment. */
.cg-icon-checklist.cg-stack {
	grid-template-columns: 1fr;
}
.cg-icon-checklist-item {
	position: relative;
	display: flex;
	align-items: center;
	background: var(--cg-surface);
	border: 1px solid var(--cg-border);
	border-radius: var(--cg-radius);
	padding: 16px 18px 16px 62px;
	min-height: 28px;
}
.cg-icon-checklist-item::before {
	content: "";
	position: absolute;
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--cg-gold);
}
.cg-icon-checklist-item::after {
	content: "";
	position: absolute;
	left: 25px;
	top: 50%;
	transform: translateY(-50%);
	width: 16px;
	height: 16px;
	background-color: #2B2B2B;
	-webkit-mask: var(--cg-icon) no-repeat center / contain;
	mask: var(--cg-icon) no-repeat center / contain;
}
.cg-icon-checklist-item.cg-icon-check-square::after { --cg-icon: var(--cg-icon-check-square); }
.cg-icon-checklist-item.cg-icon-user-circle::after { --cg-icon: var(--cg-icon-user-circle); }
.cg-icon-checklist-item.cg-icon-wallet::after { --cg-icon: var(--cg-icon-wallet); }
.cg-icon-checklist-item.cg-icon-graduation-cap::after { --cg-icon: var(--cg-icon-graduation-cap); }
.cg-icon-checklist-item.cg-icon-camera::after { --cg-icon: var(--cg-icon-camera); }
/* Added for the Explainer template (2026-07-11) — same already-vendored icon
   set used by the Q&A angle grid, wired into this component too so "Who
   This Is For" checklists aren't limited to the 5 icons City Guide's visa
   checklist happened to need first. */
.cg-icon-checklist-item.cg-icon-compass::after { --cg-icon: var(--cg-icon-compass); }
.cg-icon-checklist-item.cg-icon-users::after { --cg-icon: var(--cg-icon-users); }
.cg-icon-checklist-item.cg-icon-briefcase::after { --cg-icon: var(--cg-icon-briefcase); }
.cg-icon-checklist-item.cg-icon-clock::after { --cg-icon: var(--cg-icon-clock); }
.cg-icon-checklist-item.cg-icon-message-circle::after { --cg-icon: var(--cg-icon-message-circle); }
.cg-icon-checklist-item p {
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
	color: var(--cg-body-ink);
}

/* ============ RELATED CONTENT (Pillar Guide — Query Loop) ============ */
/* Added 2026-07-11. Functionally the same idea as the Home page's
   wp:stackable/posts grid (posts by tag/category, random order), but built
   entirely on core/query + core/post-template + core/post-featured-image +
   core/post-title + core/post-excerpt — see related_content()'s docstring
   in templates.py for why Stackable itself can't be used here (the
   pipeline's quality gate hard-rejects it). WordPress renders the actual
   <ul class="wp-block-post-template">/<li> markup server-side per request;
   this only styles the wrapper and each card's contents. */
.cg-related-content-section {
	margin: 48px 0 32px 0;
	/* Hard safety net, added 2026-07-11 after a real, reported overflow that
	   didn't reproduce in testing here (grid measured correctly — 3/2/1
	   columns, zero overflow — across several widths and a live 1400px to
	   700px resize). Whatever the root cause turns out to be, this
	   guarantees the component can never visibly break page layout by
	   pushing content past the viewport edge while it's tracked down. */
	overflow-x: hidden;
	max-width: 100%;
}
.cg-related-content-section > h2 {
	margin-bottom: 24px;
}
ul.wp-block-post-template.cg-related-content-grid {
	display: grid;
	/* minmax(0, 1fr), not bare 1fr — a plain 1fr track's minimum is
	   auto (its content's max-content size), so a track can refuse to
	   shrink below that regardless of the grid's own available width.
	   minmax(0, 1fr) makes 0 the explicit floor, guaranteeing the track
	   actually shrinks to fit — the standard fix for this exact class of
	   grid blowout. */
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
	max-width: 100%;
}
@media (max-width: 900px) {
	ul.wp-block-post-template.cg-related-content-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
	ul.wp-block-post-template.cg-related-content-grid { grid-template-columns: minmax(0, 1fr); }
}
ul.wp-block-post-template.cg-related-content-grid > li {
	list-style: none;
	margin: 0;
	padding: 0;
	/* THE fix for grid "blowout": grid items default to min-width:auto, which
	   resolves to the item's max-content size — if any card's content (a long
	   title, an unshrinkable image) can't shrink below that, the whole column
	   refuses to shrink with it, and in Chrome specifically this can visibly
	   get "stuck" wide across an interactive resize until the next full
	   layout (a reload). min-width:0 overrides the default so the column
	   genuinely respects grid-template-columns instead of its content's
	   natural size. Same rule needed on .cg-related-content-card below since
	   it's a flex column, which has the identical min-width:auto default. */
	min-width: 0;
}
.cg-related-content-card {
	background: var(--cg-surface);
	border: 1px solid var(--cg-border);
	border-radius: var(--cg-radius);
	overflow: hidden;
	height: 100%;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.cg-related-content-card .wp-block-post-featured-image {
	margin: 0;
	min-width: 0;
}
.cg-related-content-card .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	max-width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}
.cg-related-content-card .wp-block-post-title,
.cg-related-content-card h4.wp-block-post-title {
	font-family: var(--cg-font-heading);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.35;
	margin: 16px 16px 8px 16px;
	/* A single long, unbroken word (a URL, a long compound term) in a title
	   is exactly the kind of un-shrinkable content that causes the blowout
	   above — force it to break rather than push the column wider. */
	overflow-wrap: break-word;
	word-break: break-word;
}
.cg-related-content-card .wp-block-post-title a {
	/* KB request 2026-07-11: gold title + near-white body on these cards,
	   --cg-gold-bright specifically (not the base --cg-gold) since it's
	   already reserved in :root for exactly this, "hover on dark surfaces" —
	   this card is a dark surface. Fixed near-white body copy below matches
	   the same already-established pattern as .cg-pro-tip p. */
	color: var(--cg-gold-bright, #DABF2E);
	text-decoration: none;
}
.cg-related-content-card .wp-block-post-title a:hover {
	text-decoration: underline;
}
.cg-related-content-card .wp-block-post-excerpt {
	margin: 0 16px 18px 16px;
	font-size: 14px;
	line-height: 1.55;
	color: #FEFEFE;
}

/* ============ OVERALL SCORE (City Guide capstone) ============ */
/* REVISED TWICE 2026-07-09 (KB). Pass 1: solid gold fill, called odd for
   this spot. Pass 2: quiet surface card + a row of 9 multi-colored dots
   echoing the scorecard categories — KB called the RESULT cluttered and
   "blah" once built, so the "clever callback" idea is dropped. Pass 3
   (current): a single large segmented meter — the SAME component and
   single gold accent used by every city scorecard above, just bigger —
   reused here instead of invented fresh, so the capstone reads as a
   continuation of the page's own visual language rather than a separate
   decorative moment. No rainbow, no dots, one accent. */
.cg-overall-score {
	margin: 64px 0 48px 0;
	background: var(--cg-surface);
	border: 1px solid var(--cg-border);
	border-top: 4px solid var(--cg-gold);
	border-radius: var(--cg-radius);
	padding: 36px 28px;
	text-align: center;
}
.cg-overall-score .cg-overall-label {
	font-family: var(--cg-font-accent);
	font-weight: 800;
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cg-olive);
	margin: 0 0 16px 0 !important;
}
/* Large segmented meter — nested inside the label paragraph's own content,
   same safe pattern as the per-category scorecard meters (a bare sibling
   <span> between recognized blocks is the "invalid content" bug). */
.cg-overall-score .cg-overall-label .cg-segment-meter {
	max-width: 280px;
	height: 12px;
	margin: 0 auto 18px auto;
}
.cg-overall-score .cg-overall-band {
	font-family: var(--cg-font-heading);
	font-weight: 700;
	font-size: 32px;
	color: var(--cg-heading-ink);
	margin: 0 0 10px 0 !important;
}
.cg-overall-score p:not(.cg-overall-label):not(.cg-overall-band) {
	color: var(--cg-body-ink);
	font-size: 15px;
	max-width: 520px;
	margin: 0 auto !important;
}

/* ============ FAQ (closing section — citability requirement) ============ */
.cg-faq { margin-block: 56px; }
.cg-faq h2 {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 24px;
	margin: 0 0 18px 0;
}
.cg-faq h2::before {
	--cg-icon: var(--cg-icon-help-circle);
	width: 24px;
	height: 24px;
	color: var(--cg-gold);
}

/* ============ CTA BANNER ============ */
/* Deliberately self-contained (fixed dark surface + gold), reads as an
   elevated card on the dark theme and a bold break on a light one. */
.cg-cta-banner {
	margin: 56px 0;
	background: linear-gradient(135deg, #2B2B2B 0%, #3D3A28 100%);
	border: 1px solid color-mix(in srgb, var(--cg-gold) 25%, transparent);
	border-radius: var(--cg-radius);
	padding: 32px 28px;
	text-align: center;
}
.cg-cta-banner h2 {
	color: #FFFFFF;
	font-family: var(--cg-font-heading);
	font-weight: 300;
	font-size: 24px;
	margin: 0 0 10px 0;
}
.cg-cta-banner p {
	color: #D8D5C8;
	font-size: 16px;
	max-width: 46ch;
	margin: 0 auto 22px auto;
}
/* Style the inner link, not the wrapper — WP's visible element is the <a> */
.cg-cta-banner .wp-block-button__link {
	background: var(--cg-gold);
	color: #2B2B2B;
	font-family: var(--cg-font-accent);
	font-weight: 700;
	font-size: 15px;
	text-decoration: none;
	padding: 13px 26px;
	border-radius: var(--cg-radius-pill);
	transition: background 0.15s ease;
}
.cg-cta-banner .wp-block-button__link:hover {
	background: var(--cg-gold-bright);
	color: #2B2B2B;
}

/* ============ AUTHOR BOX (E-E-A-T) ============ */
.cg-author-box {
	display: grid;
	grid-template-columns: 52px 1fr;
	column-gap: 16px;
	margin-top: 40px;
	padding: 20px;
	background: var(--cg-surface);
	border: 1px solid var(--cg-border);
	border-radius: var(--cg-radius);
}
.cg-author-box::before {
	--cg-icon: var(--cg-icon-user-circle);
	grid-column: 1;
	grid-row: 1 / span 20;
	width: 52px;
	height: 52px;
	color: var(--cg-olive);
}
.cg-author-box > * { grid-column: 2; }
.cg-author-box p { margin: 0 0 2px 0; font-size: 14px; color: var(--cg-muted); }
.cg-author-box p:first-of-type {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}
.cg-author-box strong {
	display: block;
	font-family: var(--cg-font-accent);
	font-weight: 700;
	font-size: 16px;
	color: var(--cg-heading-ink);
}

/* ============ RELATED / INTERNAL LINKS ============ */
.cg-related-links {
	margin-top: 32px;
	padding-top: 24px;
	border-top: 1px solid var(--cg-border);
}
.cg-related-links h4 {
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--cg-muted);
	font-weight: 700;
	margin: 0 0 14px 0;
}
.cg-related-links ul { list-style: none; margin: 0; padding: 0; }
.cg-related-links li {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 0;
	border-bottom: 1px solid var(--cg-border);
	margin: 0;
}
.cg-related-links li:last-child { border-bottom: none; }
.cg-related-links li::before {
	--cg-icon: var(--cg-icon-arrow-right);
	width: 16px;
	height: 16px;
	color: var(--cg-gold);
}
.cg-related-links a {
	text-decoration: none;
	font-weight: 600;
	color: var(--cg-heading-ink);
}
.cg-related-links a:hover { color: var(--cg-olive); }

/* ============ CHAPTER MARKER — visual signature of the Pillar Guide ============ */
/* Unlike How-To's linear numbered steps, a pillar guide is a reference work:
   independent subtopics a reader jumps between, not a sequence. The chapter
   marker signals "you can start reading here" rather than "step N of N" —
   an eyebrow (Part 01) + rule, not a badge, so it doesn't imply order-
   dependency the content doesn't have. */
/* Chapter "Part 0X" numbering must run continuously across the whole article,
   even though a guide may split its chapters into several .cg-chapters blocks
   to interleave images between them. So reset the counter once per article
   (.entry-content), NOT per .cg-chapters block, which used to restart it. */
.entry-content { counter-reset: cg-chapter; }
.cg-chapter {
	counter-increment: cg-chapter;
	padding-top: 48px;
	margin-top: 8px;
}
.cg-chapter:first-child { padding-top: 0; margin-top: 0; }
.cg-chapter .cg-chapter-eyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
}
.cg-chapter .cg-chapter-eyebrow::before {
	content: "Part " counter(cg-chapter, decimal-leading-zero);
	font-family: var(--cg-font-accent);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cg-gold);
}
.cg-chapter .cg-chapter-eyebrow::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--cg-border);
}
.cg-chapter h2 {
	font-family: var(--cg-font-heading);
	font-weight: 600;
	font-size: 26px;
	line-height: 1.25;
	margin: 0 0 16px 0;
}
.cg-chapter p {
	color: var(--cg-body-ink);
	font-size: 18px;
	line-height: 1.7;
	margin: 0 0 1.15em 0;
}
.cg-chapter p:last-of-type { margin-bottom: 0; }

/* ============ PULL QUOTE — the single most quotable claim per chapter ============ */
/* Serves the citability standard directly: an isolated, attribution-free
   sentence is exactly the shape LLM answer engines and featured snippets
   lift verbatim. Kept visually distinct from Pro Tip (advisory, gold-bordered
   box) — this is editorial emphasis, not advice, so it reads like a magazine
   pull-quote: oversized serif-weight type, no border/background. */
.cg-chapter blockquote.cg-pullquote {
	position: relative;
	margin: 32px 0;
	padding: 4px 0 4px 28px;
	border-left: 3px solid var(--cg-gold);
}
.cg-pullquote::before {
	--cg-icon: var(--cg-icon-quote);
	content: "";
	display: block;
	width: 26px;
	height: 26px;
	background-color: var(--cg-gold);
	-webkit-mask: var(--cg-icon) no-repeat center / contain;
	mask: var(--cg-icon) no-repeat center / contain;
	margin-bottom: 10px;
	opacity: 0.85;
}
.cg-pullquote p {
	font-family: var(--cg-font-heading);
	font-weight: 300;
	font-size: 24px !important;
	line-height: 1.45 !important;
	color: var(--cg-heading-ink);
	margin: 0 !important;
}

/* ============ COMPARE LIST — visual signature of the Comparison template ============ */
/* REPLACED 2026-07-08: the first version used a core/table with overflow-x:auto
   for mobile. KB rejected it on sight — a horizontally-scrolling data table is
   a well-known bad mobile pattern regardless of whether the mechanics work,
   and KB pointed to a stacked-card comparison design (same Blocksy stack, a
   different project) as the bar to match. That fixed mobile but made EVERY
   viewport use the stacked layout, including desktop — KB caught that too,
   pointing at the same reference site's desktop view, which shows two cards
   SIDE BY SIDE per criterion, only stacking on mobile. This version: a CSS
   grid, 2 columns by default, collapsing to 1 under the mobile breakpoint —
   no JS, the grid reflows for free. Colors also moved off gold/olive (too
   close in hue for a solid pill, and gold washes out on the dark theme) onto
   the shared two-tone accent pair, --cg-accent-a/b, defined in :root above
   (also used by the Q&A angle-card grid — see below). */
.cg-compare-list { margin: 32px 0; }
.cg-compare-row { margin-bottom: 32px; }
.cg-compare-row:last-child { margin-bottom: 0; }
.cg-compare-row > p:first-child {
	font-family: var(--cg-font-heading);
	font-weight: 600;
	font-size: 20px;
	color: var(--cg-heading-ink);
	margin: 0 0 16px 0;
}
.cg-compare-cards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch; /* explicit: grid stretch is the default, but Blocksy/
		editor wrapper CSS on .wp-block-group has been seen overriding it —
		state it here rather than relying on the implicit value. */
	gap: 16px;
}
.cg-compare-card {
	align-self: stretch;
	height: 100%;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	background: var(--cg-surface);
	border-left: 4px solid var(--cg-border);
	border-radius: var(--cg-radius);
	padding: 20px;
}
.cg-compare-card.cg-side-a { border-left-color: var(--cg-accent-a); }
.cg-compare-card.cg-side-b { border-left-color: var(--cg-accent-b); }
.cg-compare-badge {
	display: inline-flex;
	align-items: center;
	font-family: var(--cg-font-accent);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #FFFFFF;
	padding: 6px 14px;
	border-radius: var(--cg-radius-pill);
	margin-bottom: 14px;
}
.cg-compare-card.cg-side-a .cg-compare-badge { background: var(--cg-accent-a); }
.cg-compare-card.cg-side-b .cg-compare-badge { background: var(--cg-accent-b); }
.cg-compare-card p:not(.cg-compare-badge) {
	margin: 0;
	color: var(--cg-body-ink);
	font-size: 15px;
	line-height: 1.55;
}

/* CSS-only score bar — NOT a chart library. --score is set inline per use
   (style="--score:72%"); the filled portion is a plain width, no JS. Always
   accompanies descriptive text (see markup contract above): it illustrates a
   general pattern, not a precise universal measurement. */
.cg-score-bar {
	display: block;
	width: 100%;
	max-width: 140px;
	height: 6px;
	border-radius: 999px;
	background: var(--cg-border);
	overflow: hidden;
	margin-bottom: 10px;
}
.cg-score-bar::before {
	content: "";
	display: block;
	height: 100%;
	width: var(--score, 0%);
	border-radius: 999px;
	background: currentColor;
}
.cg-compare-card.cg-side-a .cg-score-bar { color: var(--cg-accent-a); }
.cg-compare-card.cg-side-b .cg-score-bar { color: var(--cg-accent-b); }

/* ============ VERDICT PANEL — "which fits you," not a universal winner ============ */
/* RESTYLED 2026-07-08 (3rd pass): was a single shared bordered box split by a
   divider line, in gold/olive. KB asked for it to match the comparison-card
   look exactly — separate rounded cards with a gap between them, same
   copper/slate accent pair, same equal-height fix. Deliberately reuses
   .cg-compare-card's box model rather than duplicating it, so the two
   components can never visually drift apart again. */
.cg-verdict-panel {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
	gap: 16px;
	margin: 40px 0;
}
.cg-verdict-side {
	align-self: stretch;
	height: 100%;
	box-sizing: border-box;
	background: var(--cg-surface);
	border-left: 4px solid var(--cg-border);
	border-radius: var(--cg-radius);
	padding: 24px;
}
.cg-verdict-side.cg-side-a { border-left-color: var(--cg-accent-a); }
.cg-verdict-side.cg-side-b { border-left-color: var(--cg-accent-b); }
.cg-verdict-side h4 {
	font-family: var(--cg-font-accent);
	font-weight: 700;
	font-size: 16px;
	margin: 0 0 14px 0;
}
.cg-verdict-side.cg-side-a h4 { color: var(--cg-accent-a); }
.cg-verdict-side.cg-side-b h4 { color: var(--cg-accent-b); }
.cg-verdict-side ul {
	margin: 0;
	padding-left: 20px;
}
.cg-verdict-side li {
	color: var(--cg-body-ink);
	font-size: 15px;
	line-height: 1.6;
	margin-bottom: 8px;
}
.cg-verdict-side li:last-child { margin-bottom: 0; }

/* ============ TIMELINE — visual signature of the Checklist template ============ */
/* A continuous rail (the ::before line on .cg-timeline) runs behind a column
   of dot markers, one per milestone — same grid-with-oversized-grid-row trick
   as .cg-step-card's numbered badge, but the dot is a plain circle (no
   counter/number) since a timeline's markers denote POSITION IN TIME, not
   a count, and the actual "when" is carried by the eyebrow text next to it. */
.cg-timeline {
	position: relative;
	margin: 32px 0;
}
.cg-timeline::before {
	content: "";
	position: absolute;
	left: 9px;
	top: 8px;
	bottom: 8px;
	width: 2px;
	background: var(--cg-border);
}
/* Progressive gold fill, driven by --cg-progress (0–1), set by
   js/cg-timeline-progress.js as the reader scrolls through the section —
   enqueued from the THEME (functions.php), not post content, so it's exempt
   from the KSES/editor-isolation problems that ruled out per-article JS. A
   plain <noscript>-safe fallback: --cg-progress defaults to 0, so with JS
   disabled the rail just reads as the static grey line, never broken. */
.cg-timeline::after {
	content: "";
	position: absolute;
	left: 9px;
	top: 8px;
	width: 2px;
	height: calc(var(--cg-progress, 0) * (100% - 16px));
	background: var(--cg-gold);
	transition: height 0.1s linear;
}
/* Single inline label, not a full-width space-between pair — the earlier
   version anchored "end" to the timeline's far right edge, but the actual
   milestone content (indented past the rail, left-aligned, doesn't stretch
   edge to edge) never reaches out there, so the label looked disconnected,
   floating alone with nothing near it. One line, aligned with the content
   column, reads as a caption instead of a broken layout. */
.cg-timeline-caption {
	font-family: var(--cg-font-accent);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--cg-muted);
	margin: 0 0 20px 30px;
}
.cg-timeline-caption .cg-arrow {
	color: var(--cg-gold);
	margin: 0 4px;
}
.cg-milestone {
	position: relative;
	display: grid;
	grid-template-columns: 20px 1fr;
	column-gap: 20px;
	padding-bottom: 36px;
}
.cg-milestone:last-child { padding-bottom: 0; }
.cg-milestone::before {
	content: "";
	grid-column: 1;
	grid-row: 1 / span 20;
	width: 20px;
	height: 20px;
	margin-top: 2px;
	border-radius: 50%;
	background: var(--cg-gold);
	box-shadow: 0 0 0 3px var(--cg-surface); /* knockout ring so the dot reads as
		"on top of" the rail without needing to know the page's exact background
		color (avoids guessing at an unverified Blocksy CSS variable). */
	z-index: 1;
}
.cg-milestone > * { grid-column: 2; }
.cg-milestone-when {
	font-family: var(--cg-font-accent);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--cg-gold);
	margin: 0 0 6px 0;
}
.cg-milestone h3 {
	font-family: var(--cg-font-heading);
	font-weight: 600;
	font-size: 20px;
	line-height: 1.3;
	margin: 0 0 10px 0;
}
.cg-milestone > p:not(.cg-milestone-when) {
	color: var(--cg-body-ink);
	font-size: 17px;
	line-height: 1.65;
	margin: 0 0 14px 0;
}

/* Checkbox glyph is a plain CSS border-box — no icon asset, no interactivity
   implied. It represents "things to do," not a completion checkbox. */
ul.cg-checklist {
	list-style: none;
	margin: 0;
	padding: 0;
}
ul.cg-checklist li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-bottom: 10px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--cg-body-ink);
}
ul.cg-checklist li:last-child { margin-bottom: 0; }
ul.cg-checklist li::before {
	content: "";
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	margin-top: 2px;
	/* --cg-muted, not --cg-border: the 16%-ink hairline token disappears at
	   glyph scale on the dark palette (KB, 2026-07-12: "really aren't
	   contrasting well") — 62% ink reads as a real checkbox on both palettes
	   while staying neutral so the gold timeline rail keeps the accent. */
	border: 2px solid var(--cg-muted);
	border-radius: 4px;
	background: var(--cg-surface);
}

/* ============ ARTICLE IMAGE — real core/image blocks (2026-07-09, City Guide) =====
   figure/img is core/image's own registered markup, so id/sizeSlug round-trip
   safely with no data-* workaround needed (see blocks.py::image() docstring).
   cg-article-image only adds spacing/radius/caption styling on top. ============ */
figure.cg-article-image {
	margin: 32px 0;
	border-radius: var(--cg-radius);
	overflow: hidden;
}
figure.cg-article-image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--cg-radius);
}
figure.cg-article-image figcaption {
	margin-top: 8px;
	font-size: 13px;
	line-height: 1.4;
	color: var(--cg-muted-ink);
	text-align: center;
}

/* ============ MOBILE ============ */
@media (max-width: 600px) {
	.cg-step-card {
		grid-template-columns: 36px 1fr;
		column-gap: 14px;
	}
	.cg-step-card::before {
		width: 36px;
		height: 36px;
		font-size: 15px;
	}
	.cg-step-card h3 { font-size: 18px; margin-top: 5px; }
	p.cg-intro { font-size: 17px; }
	.cg-cta-banner { padding: 26px 18px; }
	.cg-author-box { grid-template-columns: 44px 1fr; }
	.cg-author-box::before { width: 44px; height: 44px; }
	.cg-chapter h2 { font-size: 22px; }
	.cg-chapter p { font-size: 17px; }
	.cg-pullquote p { font-size: 20px !important; line-height: 1.4 !important; }
	.cg-verdict-panel { grid-template-columns: 1fr; }
	.cg-verdict-side { padding: 18px; }
	.cg-compare-cards { grid-template-columns: 1fr; }
	.cg-compare-card { padding: 16px; }
	.cg-milestone h3 { font-size: 18px; }
	.cg-milestone > p:not(.cg-milestone-when) { font-size: 16px; }
}

/* ============ ICON DATA (generated from assets/icons/*.svg — do not hand-edit) ============ */
:root {
	--cg-icon-check-square: url("data:image/svg+xml,%3C%21-- %40license lucide-static v1.23.0 - ISC --%3E %3Csvg class=%22lucide lucide-check-square%22 xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E %3Cpath d=%22M21 10.656V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h12.344%22 /%3E %3Cpath d=%22m9 11 3 3L22 4%22 /%3E %3C/svg%3E");
	--cg-icon-lightbulb: url("data:image/svg+xml,%3C%21-- %40license lucide-static v1.23.0 - ISC --%3E %3Csvg class=%22lucide lucide-lightbulb%22 xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E %3Cpath d=%22M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5%22 /%3E %3Cpath d=%22M9 18h6%22 /%3E %3Cpath d=%22M10 22h4%22 /%3E %3C/svg%3E");
	--cg-icon-zap: url("data:image/svg+xml,%3C%21-- %40license lucide-static v1.23.0 - ISC --%3E %3Csvg class=%22lucide lucide-zap%22 xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E %3Cpath d=%22M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z%22 /%3E %3C/svg%3E");
	--cg-icon-chevron-down: url("data:image/svg+xml,%3C%21-- %40license lucide-static v1.23.0 - ISC --%3E %3Csvg class=%22lucide lucide-chevron-down%22 xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E %3Cpath d=%22m6 9 6 6 6-6%22 /%3E %3C/svg%3E");
	--cg-icon-help-circle: url("data:image/svg+xml,%3C%21-- %40license lucide-static v1.23.0 - ISC --%3E %3Csvg class=%22lucide lucide-help-circle%22 xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E %3Ccircle cx=%2212%22 cy=%2212%22 r=%2210%22 /%3E %3Cpath d=%22M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3%22 /%3E %3Cpath d=%22M12 17h.01%22 /%3E %3C/svg%3E");
	--cg-icon-user-circle: url("data:image/svg+xml,%3C%21-- %40license lucide-static v1.23.0 - ISC --%3E %3Csvg class=%22lucide lucide-user-circle%22 xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E %3Ccircle cx=%2212%22 cy=%2212%22 r=%2210%22 /%3E %3Ccircle cx=%2212%22 cy=%2210%22 r=%223%22 /%3E %3Cpath d=%22M7 20.662V19a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v1.662%22 /%3E %3C/svg%3E");
	--cg-icon-arrow-right: url("data:image/svg+xml,%3C%21-- %40license lucide-static v1.23.0 - ISC --%3E %3Csvg class=%22lucide lucide-arrow-right%22 xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E %3Cpath d=%22M5 12h14%22 /%3E %3Cpath d=%22m12 5 7 7-7 7%22 /%3E %3C/svg%3E");
	--cg-icon-quote: url("data:image/svg+xml,%3C%21-- %40license lucide-static v1.23.0 - ISC --%3E %3Csvg class=%22lucide lucide-quote%22 xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E %3Cpath d=%22M16 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z%22 /%3E %3Cpath d=%22M5 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z%22 /%3E %3C/svg%3E");

	/* Added for the Q&A angle-card grid (2026-07-09 redesign) */
	--cg-icon-compass: url("data:image/svg+xml,%3C%21-- %40license lucide-static v1.23.0 - ISC --%3E %3Csvg class=%22lucide lucide-compass%22 xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E %3Ccircle cx=%2212%22 cy=%2212%22 r=%2210%22 /%3E %3Cpath d=%22m16.24 7.76-1.804 5.411a2 2 0 0 1-1.265 1.265L7.76 16.24l1.804-5.411a2 2 0 0 1 1.265-1.265z%22 /%3E %3C/svg%3E");
	--cg-icon-clock: url("data:image/svg+xml,%3C%21-- %40license lucide-static v1.23.0 - ISC --%3E %3Csvg class=%22lucide lucide-clock%22 xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E %3Ccircle cx=%2212%22 cy=%2212%22 r=%2210%22 /%3E %3Cpath d=%22M12 6v6l4 2%22 /%3E %3C/svg%3E");
	--cg-icon-graduation-cap: url("data:image/svg+xml,%3C%21-- %40license lucide-static v1.23.0 - ISC --%3E %3Csvg class=%22lucide lucide-graduation-cap%22 xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E %3Cpath d=%22M21.42 10.922a1 1 0 0 0-.019-1.838L12.83 5.18a2 2 0 0 0-1.66 0L2.6 9.08a1 1 0 0 0 0 1.832l8.57 3.908a2 2 0 0 0 1.66 0z%22 /%3E %3Cpath d=%22M22 10v6%22 /%3E %3Cpath d=%22M6 12.5V16a6 3 0 0 0 12 0v-3.5%22 /%3E %3C/svg%3E");
	--cg-icon-message-circle: url("data:image/svg+xml,%3C%21-- %40license lucide-static v1.23.0 - ISC --%3E %3Csvg class=%22lucide lucide-message-circle%22 xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E %3Cpath d=%22M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719%22 /%3E %3C/svg%3E");

	/* Added for the City Guide template (2026-07-09) */
	--cg-icon-home: url("data:image/svg+xml,%3C%21-- %40license lucide-static v1.23.0 - ISC --%3E %3Csvg class=%22lucide lucide-home%22 xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E %3Cpath d=%22M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8%22 /%3E %3Cpath d=%22M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z%22 /%3E %3C/svg%3E");
	--cg-icon-bus: url("data:image/svg+xml,%3C%21-- %40license lucide-static v1.23.0 - ISC --%3E %3Csvg class=%22lucide lucide-bus%22 xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E %3Cpath d=%22M8 6v6%22 /%3E %3Cpath d=%22M15 6v6%22 /%3E %3Cpath d=%22M2 12h19.6%22 /%3E %3Cpath d=%22M18 18h3s.5-1.7.8-2.8c.1-.4.2-.8.2-1.2 0-.4-.1-.8-.2-1.2l-1.4-5C20.1 6.8 19.1 6 18 6H4a2 2 0 0 0-2 2v10h3%22 /%3E %3Ccircle cx=%227%22 cy=%2218%22 r=%222%22 /%3E %3Cpath d=%22M9 18h5%22 /%3E %3Ccircle cx=%2216%22 cy=%2218%22 r=%222%22 /%3E %3C/svg%3E");
	--cg-icon-heart-pulse: url("data:image/svg+xml,%3C%21-- %40license lucide-static v1.23.0 - ISC --%3E %3Csvg class=%22lucide lucide-heart-pulse%22 xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E %3Cpath d=%22M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5%22 /%3E %3Cpath d=%22M3.22 13H9.5l.5-1 2 4.5 2-7 1.5 3.5h5.27%22 /%3E %3C/svg%3E");
	--cg-icon-shield: url("data:image/svg+xml,%3C%21-- %40license lucide-static v1.23.0 - ISC --%3E %3Csvg class=%22lucide lucide-shield%22 xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E %3Cpath d=%22M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z%22 /%3E %3C/svg%3E");
	--cg-icon-briefcase: url("data:image/svg+xml,%3C%21-- %40license lucide-static v1.23.0 - ISC --%3E %3Csvg class=%22lucide lucide-briefcase%22 xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E %3Cpath d=%22M16 20V4a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16%22 /%3E %3Crect width=%2220%22 height=%2214%22 x=%222%22 y=%226%22 rx=%222%22 /%3E %3C/svg%3E");
	--cg-icon-users: url("data:image/svg+xml,%3C%21-- %40license lucide-static v1.23.0 - ISC --%3E %3Csvg class=%22lucide lucide-users%22 xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E %3Cpath d=%22M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2%22 /%3E %3Cpath d=%22M16 3.128a4 4 0 0 1 0 7.744%22 /%3E %3Cpath d=%22M22 21v-2a4 4 0 0 0-3-3.87%22 /%3E %3Ccircle cx=%229%22 cy=%227%22 r=%224%22 /%3E %3C/svg%3E");
	--cg-icon-sun: url("data:image/svg+xml,%3C%21-- %40license lucide-static v1.23.0 - ISC --%3E %3Csvg class=%22lucide lucide-sun%22 xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E %3Ccircle cx=%2212%22 cy=%2212%22 r=%224%22 /%3E %3Cpath d=%22M12 2v2%22 /%3E %3Cpath d=%22M12 20v2%22 /%3E %3Cpath d=%22m4.93 4.93 1.41 1.41%22 /%3E %3Cpath d=%22m17.66 17.66 1.41 1.41%22 /%3E %3Cpath d=%22M2 12h2%22 /%3E %3Cpath d=%22M20 12h2%22 /%3E %3Cpath d=%22m6.34 17.66-1.41 1.41%22 /%3E %3Cpath d=%22m19.07 4.93-1.41 1.41%22 /%3E %3C/svg%3E");
	--cg-icon-wallet: url("data:image/svg+xml,%3C%21-- %40license lucide-static v1.23.0 - ISC --%3E %3Csvg class=%22lucide lucide-wallet%22 xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E %3Cpath d=%22M19 7V4a1 1 0 0 0-1-1H5a2 2 0 0 0 0 4h15a1 1 0 0 1 1 1v4h-3a2 2 0 0 0 0 4h3a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1%22 /%3E %3Cpath d=%22M3 5v14a2 2 0 0 0 2 2h15a1 1 0 0 0 1-1v-4%22 /%3E %3C/svg%3E");
	--cg-icon-map-pin: url("data:image/svg+xml,%3C%21-- %40license lucide-static v1.23.0 - ISC --%3E %3Csvg class=%22lucide lucide-map-pin%22 xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E %3Cpath d=%22M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0%22 /%3E %3Ccircle cx=%2212%22 cy=%2210%22 r=%223%22 /%3E %3C/svg%3E");
	--cg-icon-camera: url("data:image/svg+xml,%3C%21-- %40license lucide-static v1.23.0 - ISC --%3E %3Csvg class=%22lucide lucide-camera%22 xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E %3Cpath d=%22M13.997 4a2 2 0 0 1 1.76 1.05l.486.9A2 2 0 0 0 18.003 7H20a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h1.997a2 2 0 0 0 1.759-1.048l.489-.904A2 2 0 0 1 10.004 4z%22 /%3E %3Ccircle cx=%2212%22 cy=%2213%22 r=%223%22 /%3E %3C/svg%3E");
	--cg-icon-swords: url("data:image/svg+xml,%3C%21-- %40license lucide-static v1.23.0 - ISC --%3E %3Csvg class=%22lucide lucide-swords%22 xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22 %3E %3Cpolyline points=%2214.5 17.5 3 6 3 3 6 3 17.5 14.5%22 /%3E %3Cline x1=%2213%22 x2=%2219%22 y1=%2219%22 y2=%2213%22 /%3E %3Cline x1=%2216%22 x2=%2220%22 y1=%2216%22 y2=%2220%22 /%3E %3Cline x1=%2219%22 x2=%2221%22 y1=%2221%22 y2=%2219%22 /%3E %3Cpolyline points=%2214.5 6.5 18 3 21 3 21 6 17.5 9.5%22 /%3E %3Cline x1=%225%22 x2=%229%22 y1=%2214%22 y2=%2218%22 /%3E %3Cline x1=%227%22 x2=%224%22 y1=%2217%22 y2=%2220%22 /%3E %3Cline x1=%223%22 x2=%225%22 y1=%2219%22 y2=%2221%22 /%3E %3C/svg%3E");
}