/* ==========================================================================
   CURB VIBES - COMPONENT FOUNDATIONS
   Only the pieces GeneratePress/GenerateBlocks cannot express cleanly:
   focus states, observation labels, chips, callout notch, curbline device.
   Buttons, cards, panels and grids are built as GenerateBlocks global
   styles/patterns in Stage 3 and stay editable in the editor.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. VISIBLE FOCUS (Handoff section 6)
   2px offset outline; Deep Spruce on light fields, Warm Plaster on dark.
   Never rely on colour change alone.
   -------------------------------------------------------------------------- */

:focus-visible {
	outline: var(--cv-focus-width) solid var(--cv-focus-ring);
	outline-offset: var(--cv-focus-offset);
}

/* Elements inside dark (Deep Spruce) fields: add .cv-on-dark to the dark
   wrapper (footer, spruce CTA bands) in later stages. */
.cv-on-dark :focus-visible {
	outline-color: var(--cv-focus-ring-on-dark);
}

/* Suppress the default ring only where :focus-visible is honoured. */
:focus:not(:focus-visible) {
	outline: none;
}

/* --------------------------------------------------------------------------
   2. OBSERVATION LABELS (canvas 1a)
   SOURCE HOUSE / CONCEPT DIRECTION / THE CONSTRAINT / WHAT STAYED.
   Square corners by design. SOURCE HOUSE and CONCEPT DIRECTION are permanent
   content labels, kept in production (Handoff section 4).
   -------------------------------------------------------------------------- */

.cv-label {
	display: inline-block;
	font-family: var(--cv-font-body);
	font-weight: 600;
	font-size: var(--cv-text-caption);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1;
	padding: 0.375em 0.75em;
	border-radius: 0; /* labels are square */
}

.cv-label--source {
	background-color: var(--cv-spruce);
	color: var(--cv-plaster);
}

.cv-label--concept {
	background-color: var(--cv-clay);
	color: var(--cv-card);
}

.cv-label--constraint {
	background-color: var(--cv-porch); /* Porch Light as small field with DARK text only */
	color: var(--cv-charcoal);
}

.cv-label--stayed {
	background-color: var(--cv-sage);
	color: var(--cv-spruce);
}

/* --------------------------------------------------------------------------
   3. CATEGORY CHIPS - base style only (canvas 1a)
   The interactive in-place filter is deliberately NOT built at launch
   (Doc 09 section 11.2). This class styles chips wherever they appear.
   -------------------------------------------------------------------------- */

.cv-chip {
	display: inline-block;
	font-family: var(--cv-font-body);
	font-weight: 600;
	font-size: var(--cv-text-caption);
	line-height: 1;
	color: var(--cv-spruce);
	background-color: transparent;
	border: 1px solid var(--cv-spruce);
	border-radius: var(--cv-radius-chip);
	padding: 0.75em 1.25em; /* keeps the 44px minimum target with line-height */
	text-decoration: none;
}

.cv-chip.is-active,
.cv-chip[aria-pressed="true"] {
	background-color: var(--cv-spruce);
	color: var(--cv-plaster);
}

/* --------------------------------------------------------------------------
   4. EDITORIAL CALLOUTS - notched top border (canvas 1a)
   Field colours are set per-variant; the notch is a deliberate gap in the
   top border near the left edge. Exact notch geometry is verified against
   the canvas during Stage 3 component review.
   Disclosure text inside callouts: minimum 13px, never truncated.
   -------------------------------------------------------------------------- */

.cv-callout {
	position: relative;
	border: 1px solid var(--cv-hairline);
	border-radius: 0;
	padding: var(--cv-space-s) var(--cv-space-m);
	font-size: var(--cv-text-disclosure);
	line-height: 1.55;
}

.cv-callout::before {
	/* The notch: paints a short gap over the top border. */
	content: "";
	position: absolute;
	top: -1px;
	left: 28px;
	width: 44px;
	height: 1px;
	background-color: var(--cv-callout-field, var(--cv-plaster));
}

.cv-callout--ai {
	--cv-callout-field: var(--cv-sage);
	background-color: var(--cv-sage);
}

.cv-callout--affiliate {
	--cv-callout-field: var(--cv-parchment);
	background-color: var(--cv-parchment);
}

.cv-callout--boundary {
	--cv-callout-field: var(--cv-boundary);
	background-color: var(--cv-boundary);
}

/* --------------------------------------------------------------------------
   5. INTERRUPTED CURBLINE - editorial divider (Doc 05; canvas 1a
   "Curb Story Rule"). One deliberate opening; use at most once per viewport,
   never under every heading.
   -------------------------------------------------------------------------- */

.cv-curbline {
	display: block;
	width: min(180px, 40%);
	height: 5px;
	margin: var(--cv-space-l) auto;
	border: 0;
	background: linear-gradient(
		to right,
		var(--cv-spruce) 0 42%,
		transparent 42% 53%, /* the single opening, ~11% with centre bias */
		var(--cv-spruce) 53% 100%
	);
}

.cv-curbline--left {
	margin-left: 0;
	margin-right: auto;
}

/* --------------------------------------------------------------------------
   6. EYEBROW (category kicker above guide titles - Brick Clay)
   -------------------------------------------------------------------------- */

.cv-eyebrow {
	font-family: var(--cv-font-body);
	font-weight: 600;
	font-size: var(--cv-text-caption);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	/* Small text may sit on the Warm Plaster page field, so the accessible
	   clay-ink variant is used (V-2 resolution). Brand --cv-clay remains in
	   use for labels, buttons, underlines and large numerals. */
	color: var(--cv-clay-ink);
}