/*
 * Brightway Consultancy — components.css
 * Atomic UI components — MASTER.md §9.
 * Depends on tokens.css (colors, motion, radii, type, spacing).
 *
 * Universal contract (MASTER §9 preamble + §6.3 rules):
 *   - Every hover gated behind @media (hover: hover) and (pointer: fine)
 *   - :focus-visible custom (never default ring) — 2px gold, offset 4px
 *   - Button :active → transform: scale(0.97), --bwc-dur-press
 *   - Exact transition properties only — NEVER transition: all
 *   - UI durations ≤200ms (press 120 / tooltip 160 / dropdown 200);
 *     modal 320ms and reveal 800ms are deliberate Emil exceptions and
 *     are NOT used here (atomic components, no modals or reveals).
 *   - prefers-reduced-motion handled globally in utilities.css; this
 *     file uses transforms freely. End-state of every hover/focus
 *     still applies under reduced-motion — transitions snap instead
 *     of animating, no affordance is lost.
 *   - Vanilla CSS, no Tailwind. Logical properties where directional.
 *   - Radii: Double-Bezel pair consumed from tokens (--bwc-radius-*);
 *     pill 999px / input 8px / trust badge 4px stay inline per MASTER
 *     spec (single-purpose, no derived relationship to maintain).
 */

/* ===========================================================================
 * 1. BUTTONS — primary / ghost / link (MASTER §9.1)
 * ========================================================================= */

/* Shared base for filled-pill buttons (primary + ghost) */
.bwc-btn-primary,
.bwc-btn-ghost {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--bwc-font-body);
	font-size: var(--bwc-fs-base);
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	padding-block: 0.875rem;
	padding-inline: 1.5rem;
	border-radius: 999px; /* full pill — inline per MASTER spec */
	cursor: pointer;
	user-select: none;
	/* Exact properties — NEVER transition: all */
	transition:
		transform var(--bwc-dur-press) var(--bwc-ease-out),
		background-color var(--bwc-dur-tooltip) var(--bwc-ease-out),
		border-color var(--bwc-dur-tooltip) var(--bwc-ease-out);
}

.bwc-btn-primary:active,
.bwc-btn-ghost:active {
	transform: scale(0.97);
}

.bwc-btn-primary:focus-visible,
.bwc-btn-ghost:focus-visible,
.bwc-btn-link:focus-visible {
	outline: 2px solid var(--bwc-accent-gold);
	outline-offset: 4px;
}

/* --- 1a. Primary (filled red CTA, MASTER §9.1a) ------------------------ */

.bwc-btn-primary {
	background-color: var(--bwc-accent-red);
	color: var(--bwc-text);
	border: 1px solid var(--bwc-accent-red);
}

/* When trailing-icon slot is present, tighten right inline padding so the
 * icon's circular wrapper sits flush with the original inner padding edge
 * (MASTER §9.1d Button-in-Button). :has() supported across modern browsers. */
.bwc-btn-primary:has(.bwc-btn-primary__icon) {
	padding-inline-end: 0.375rem;
}

@media (hover: hover) and (pointer: fine) {
	.bwc-btn-primary:hover {
		background-color: var(--bwc-accent-red-hover);
		border-color: var(--bwc-accent-red-hover);
	}
}

/* Button-in-Button trailing icon wrapper (MASTER §9.1d) */
.bwc-btn-primary__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 2rem;
	block-size: 2rem;
	border-radius: 999px;
	background-color: rgba(245, 241, 232, 0.10); /* sand 10% — matches --bwc-text */
	margin-inline-start: 0.5rem;
	flex: 0 0 auto;
	transition:
		transform var(--bwc-dur-tooltip) var(--bwc-ease-out),
		background-color var(--bwc-dur-tooltip) var(--bwc-ease-out);
}

.bwc-btn-primary__icon > svg {
	inline-size: 1rem;
	block-size: 1rem;
}

@media (hover: hover) and (pointer: fine) {
	/* Magnetic Button kinetic tension on the icon wrapper */
	.bwc-btn-primary:hover .bwc-btn-primary__icon {
		transform: translate(1px, -1px) scale(1.05);
		background-color: rgba(245, 241, 232, 0.18);
	}
}

/* --- 1b. Ghost (gold hairline, MASTER §9.1b) --------------------------- */

.bwc-btn-ghost {
	background-color: transparent;
	color: var(--bwc-text);
	border: 1px solid var(--bwc-accent-gold-40);
}

@media (hover: hover) and (pointer: fine) {
	.bwc-btn-ghost:hover {
		border-color: var(--bwc-accent-gold);
		background-color: rgba(201, 169, 97, 0.06); /* faint gold tint, ≤6% */
	}
}

/* --- 1c. Link (traced underline, MASTER §9.1c) ------------------------- */

.bwc-btn-link {
	position: relative;
	display: inline-block;
	color: var(--bwc-text);
	font-family: var(--bwc-font-body);
	font-size: inherit;
	font-weight: 500;
	text-decoration: none;
	padding-block: 2px; /* breathing room for the underline */
	cursor: pointer;
}

.bwc-btn-link::after {
	content: '';
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	block-size: 1px;
	background-color: currentColor;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--bwc-dur-tooltip) var(--bwc-ease-out);
}

@media (hover: hover) and (pointer: fine) {
	.bwc-btn-link:hover::after {
		transform: scaleX(1);
	}
}

/* Keyboard parity: same underline reveal on focus-visible (MASTER §6.3 rule 1
 * forbids ANIMATING keyboard-triggered actions; a CSS transition on a focus
 * pseudo-element is a passive visual state change, not an action animation,
 * and so remains permitted. The outline ring above is the primary affordance.) */
.bwc-btn-link:focus-visible::after {
	transform: scaleX(1);
}

/* ===========================================================================
 * 2. EYEBROW TAG — pill micro-badge (MASTER §9.2)
 *    Distinct from .bwc-eyebrow in typography.css: .bwc-eyebrow is the bare
 *    typographic treatment; .bwc-eyebrow-tag is the pilled component (border
 *    + radius + padding) used directly before an H1/H2.
 * ========================================================================= */

.bwc-eyebrow-tag {
	display: inline-block;
	font-family: var(--bwc-font-body);
	font-size: var(--bwc-fs-eyebrow); /* 10px, NOT fluid */
	font-weight: 500;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--bwc-accent-gold);
	padding-block: 0.25rem;
	padding-inline: 0.75rem;
	border: 1px solid var(--bwc-accent-gold-30);
	border-radius: 999px; /* pill — inline per spec */
	line-height: 1.2;
}

/* Editorial coupling: when an eyebrow tag sits immediately above an h2,
 * tighten the gap to space-1 so the eyebrow reads as the H2's LABEL —
 * one typographic unit, not two stacked siblings. Higher specificity
 * (class + element selector) beats the default sibling-rhythm rules in
 * section headers / inner containers, so no per-section override needed. */
.bwc-eyebrow-tag + h2 {
	margin-block-start: var(--bwc-space-1);
}

/* ===========================================================================
 * 3. CARD — Double-Bezel (MASTER §9.3)
 * ========================================================================= */

.bwc-card {
	position: relative;
	background-color: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.06);
	padding: 6px;
	border-radius: var(--bwc-radius-outer); /* 32px from tokens */
}

.bwc-card__inner {
	background-color: var(--bwc-bg-elevated);
	/* Sand-tinted inset highlight (MASTER §9.3 intentional deviation from
	 * skill's white — keeps the warm Desert cast, no cold specular edge) */
	box-shadow: inset 0 1px 1px rgba(245, 241, 232, 0.06);
	padding: 2rem;
	border-radius: var(--bwc-radius-inner); /* 26px = 32 - 6, concentric */
}

/* Gold hairline expands at card bottom on hover (MASTER §6.4) */
.bwc-card::after {
	content: '';
	position: absolute;
	inset-inline: 12%;
	inset-block-end: -1px;
	block-size: 1px;
	background-color: var(--bwc-accent-gold-hairline);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform var(--bwc-dur-dropdown) var(--bwc-ease-out);
	pointer-events: none;
}

/* Optional icon slot inside the card — translates on parent hover
 * (Magnetic Button physics, MASTER §6.4) */
.bwc-card__icon {
	transition: transform var(--bwc-dur-tooltip) var(--bwc-ease-out);
}

@media (hover: hover) and (pointer: fine) {
	.bwc-card:hover::after {
		transform: scaleX(1);
	}

	.bwc-card:hover .bwc-card__icon {
		transform: translate(2px, -2px);
	}
}

/* ===========================================================================
 * 4. INPUT — form text input (MASTER §9.4)
 * ========================================================================= */

.bwc-input {
	display: block;
	inline-size: 100%;
	background-color: var(--bwc-bg-elevated);
	color: var(--bwc-text);
	font-family: var(--bwc-font-body);
	font-size: var(--bwc-fs-base);
	line-height: 1.4;
	border: 1px solid rgba(245, 241, 232, 0.12);
	border-radius: 8px; /* inline per MASTER spec */
	padding-block: 0.75rem;
	padding-inline: 1rem;
	transition: border-color var(--bwc-dur-tooltip) var(--bwc-ease-out);
}

.bwc-input::placeholder {
	color: var(--bwc-text-subtle);
}

.bwc-input:focus-visible {
	outline: none; /* gold border replaces the ring — visible, not default */
	border-color: var(--bwc-accent-gold);
}

/* ===========================================================================
 * 5. HAIRLINE — gold-fade divider (MASTER §9.5)
 * ========================================================================= */

.bwc-hairline {
	display: block;
	block-size: 1px;
	border: 0;
	background: linear-gradient(
		to right,
		transparent,
		var(--bwc-accent-gold-hairline),
		transparent
	);
	margin-block: var(--bwc-space-6);
}

/* ===========================================================================
 * 6. TRUST BADGE — emerald institutional outline (MASTER §9.6 + 2026-05-20 deviation)
 *    Post-visual deviation logged: MASTER §9.6 prescribes a filled badge with
 *    --bwc-accent-emerald-soft (15%) bg + --bwc-accent-emerald-border (40%)
 *    border + --bwc-text label. After visual review at 2026-05-20, the filled
 *    variant read as too washed-out at small size on the warm-dark surface.
 *    Switched to outline-only with solid emerald for color, transparent bg
 *    and solid emerald border. Institutional 4px radius preserved.
 * ========================================================================= */

.bwc-badge-trust {
	display: inline-block;
	font-family: var(--bwc-font-body);
	font-size: var(--bwc-fs-xs);
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--bwc-accent-emerald);
	background-color: transparent;
	border: 1px solid var(--bwc-accent-emerald);
	padding-block: 0.375rem;
	padding-inline: 0.75rem;
	border-radius: 4px; /* square-ish — institutional, inline per spec */
	line-height: 1.2;
}

/*
 * AUDIT — Phase 5 complete, components.css (2026-05-20)
 *
 * emil-design-eng — Before/After review (this is a greenfield file, no
 * "before" exists; concerns checked against MASTER §6 motion rules):
 *
 *   | Concern (rule)                                  | Resolution                                                                                      |
 *   |-------------------------------------------------|-------------------------------------------------------------------------------------------------|
 *   | Rule 1 — no animation on keyboard-init actions  | None present (no command palette, no shortcut animations).                                      |
 *   | Rule 2 — exact transition properties            | Every transition lists exact props (transform / background-color / border-color). 0 use of "all".|
 *   | Rule 3 — asymmetric enter/exit                  | UI components stay ≤200ms — within Emil's "symmetric where eye can't track" band. Larger motion |
 *   |                                                 | (modals/reveals) is out of scope here and will be asymmetric where it appears.                  |
 *   | Rule 4 — stagger siblings                       | Not applicable (atomic components have no sibling-list entry choreography here).                |
 *   | Rule 5 — hover gated behind (hover:hover) media | ✅ Every :hover wrapped — buttons primary/ghost/link, primary__icon, card, card__icon.          |
 *   | Rule 6 — prefers-reduced-motion respected       | Delegated to utilities.css global override. End-state of every hover still applies (transitions |
 *   |                                                 | snap, no affordance lost) when motion is reduced.                                               |
 *   | Rule 7 — no scale(0) entries                    | No entry animations in this file. Smallest scale used = 0.97 (button press) / scale 1.05 (icon).|
 *   | Rule 8 — button :active scale(0.97) + press dur | ✅ .bwc-btn-primary, .bwc-btn-ghost. Link is not a pressable button — no scale.                  |
 *   | Rule 9 — only animate transform/opacity         | ✅ transform + background-color + border-color only. No layout-thrashing props animated.        |
 *   | Rule 10 — CSS transitions over keyframes        | ✅ All interactions are CSS transitions. No @keyframes in this file.                            |
 *
 *   Duration audit: press 120, tooltip 160, dropdown 200 — all ≤200ms.
 *   No use of --bwc-dur-modal (320ms) or --bwc-dur-reveal (800ms) here.
 *
 *   Easing audit: --bwc-ease-out only. --bwc-ease-in is undefined (banned).
 *   --bwc-ease-in-out / --bwc-ease-drawer not needed at atomic level.
 *
 * high-end-visual-design — Absolute Zero:
 *   | Anti-pattern                                    | Status                                                                                          |
 *   |-------------------------------------------------|-------------------------------------------------------------------------------------------------|
 *   | Inter/Roboto/Arial/etc. fonts                   | ✅ Only Fraunces/Barlow via --bwc-font-* tokens.                                                |
 *   | Pure #000 / pure #FFF                           | ✅ Surfaces use --bwc-bg / --bwc-text (warm-tinted). White rgba alphas used for low-alpha shell |
 *   |                                                 | (Double-Bezel outer) — these are NOT pure #FFF fills, they are 3%/6% wash over warm bg.         |
 *   | 1px solid gray                                  | ✅ All borders are semantic — gold-alpha, sand-alpha, or solid emerald (trust badge). Never gray.|
 *   | shadow-md / shadow-lg / harsh rgba(0,0,0,.3)    | ✅ No drop shadows. Only sand-tinted inset highlight on card __inner (rgba(245,241,232,.06)).   |
 *   | Default focus ring                              | ✅ Every :focus-visible custom — 2px gold + 4px offset on buttons, gold border on inputs.       |
 *   | transition: all                                 | ✅ Zero occurrences. Every transition enumerates exact properties.                              |
 *   | Built-in CSS ease-in / ease-in-out keywords     | ✅ Zero occurrences. Only the custom cubic-bezier --bwc-ease-out is referenced.                 |
 *   | Linear easing on UI                             | ✅ Not used. Reserved for marquee/progress per MASTER §6.                                       |
 *   | Tailwind utility class                          | ✅ Zero occurrences. Every selector .bwc-*-prefixed BEM-style.                                  |
 *   | Magnetic Button physics (positive requirement)  | ✅ Primary trailing icon translate(1px,-1px) scale(1.05) on parent hover.                       |
 *   | Double-Bezel concentric radii                   | ✅ Outer 32px / inner 26px via --bwc-radius-* tokens, derived via calc().                       |
 *   | Hairline gold ≤4px fill rule                    | ✅ Hairline divider is 1px. Gold borders are 1px. No gold fill anywhere wider than 4px.         |
 *
 * Tokens consumed: --bwc-text, --bwc-text-subtle, --bwc-bg-elevated,
 * --bwc-accent-red, --bwc-accent-red-hover, --bwc-accent-gold,
 * --bwc-accent-gold-30, --bwc-accent-gold-40, --bwc-accent-gold-hairline,
 * --bwc-accent-emerald,
 * --bwc-font-body, --bwc-fs-base, --bwc-fs-xs, --bwc-fs-eyebrow,
 * --bwc-space-6, --bwc-radius-outer, --bwc-radius-inner,
 * --bwc-dur-press, --bwc-dur-tooltip, --bwc-dur-dropdown, --bwc-ease-out.
 *
 * Inline values (intentional, MASTER spec): 999px pill, 8px input, 4px badge,
 * rgba sand/gold/white alphas at 3% / 6% / 10% / 12% / 18%.
 *
 * Result: 0 blocking violation. 1 intentional post-visual deviation from
 * MASTER §9.6 logged at §6 (trust badge filled → outline), validated
 * 2026-05-20 against the rendered page on warm-dark surface.
 */