/**
 * Case Converter Pro — Styles
 * Scoped entirely under .ccp-wrap to avoid leaking into the host theme.
 */

.ccp-wrap {
	/* ===== Design tokens ===== */
	--ccp-accent: #0f766e;
	--ccp-accent-hover: #115e59;
	--ccp-accent-soft: rgba(15, 118, 110, 0.08);
	--ccp-accent-ring: rgba(15, 118, 110, 0.28);

	--ccp-bg: #fbfaf7;
	--ccp-surface: #ffffff;
	--ccp-surface-2: #f5f4ef;
	--ccp-surface-hover: #efede6;
	--ccp-border: #e4e1d8;
	--ccp-border-strong: #d3cfc2;

	--ccp-ink: #1c1c1a;
	--ccp-ink-2: #3f3f3b;
	--ccp-ink-3: #6b6b64;
	--ccp-ink-4: #8a8a82;

	--ccp-success: #15803d;

	--ccp-radius: 12px;
	--ccp-radius-sm: 8px;
	--ccp-radius-xs: 6px;

	--ccp-shadow-sm: 0 1px 2px rgba(20, 20, 15, 0.04);
	--ccp-shadow-md: 0 4px 12px -2px rgba(20, 20, 15, 0.06), 0 2px 4px -1px rgba(20, 20, 15, 0.04);
	--ccp-shadow-lg: 0 24px 48px -12px rgba(20, 20, 15, 0.12), 0 8px 16px -4px rgba(20, 20, 15, 0.06);

	--ccp-font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--ccp-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
	--ccp-font-display: "Iowan Old Style", "Palatino Linotype", Palatino, "URW Palladio L", Georgia, serif;

	--ccp-transition: 160ms cubic-bezier(0.4, 0, 0.2, 1);

	font-family: var(--ccp-font-sans);
	color: var(--ccp-ink);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	box-sizing: border-box;
	max-width: 100%;
	margin: 0 auto;
	position: relative;
}

.ccp-wrap *,
.ccp-wrap *::before,
.ccp-wrap *::after {
	box-sizing: border-box;
}

/* ===== Dark theme ===== */
@media (prefers-color-scheme: dark) {
	.ccp-wrap[data-theme="auto"] {
		--ccp-bg: #141413;
		--ccp-surface: #1c1c1a;
		--ccp-surface-2: #232320;
		--ccp-surface-hover: #2a2a26;
		--ccp-border: #2f2f2a;
		--ccp-border-strong: #3c3c36;
		--ccp-ink: #f5f4ef;
		--ccp-ink-2: #d9d7ce;
		--ccp-ink-3: #9a9a90;
		--ccp-ink-4: #6f6f68;
		--ccp-accent: #2dd4bf;
		--ccp-accent-hover: #5eead4;
		--ccp-accent-soft: rgba(45, 212, 191, 0.14);
		--ccp-accent-ring: rgba(45, 212, 191, 0.35);
		--ccp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
		--ccp-shadow-md: 0 4px 12px -2px rgba(0, 0, 0, 0.4);
		--ccp-shadow-lg: 0 24px 48px -12px rgba(0, 0, 0, 0.5);
	}
}

.ccp-wrap[data-theme="dark"] {
	--ccp-bg: #141413;
	--ccp-surface: #1c1c1a;
	--ccp-surface-2: #232320;
	--ccp-surface-hover: #2a2a26;
	--ccp-border: #2f2f2a;
	--ccp-border-strong: #3c3c36;
	--ccp-ink: #f5f4ef;
	--ccp-ink-2: #d9d7ce;
	--ccp-ink-3: #9a9a90;
	--ccp-ink-4: #6f6f68;
	--ccp-accent: #2dd4bf;
	--ccp-accent-hover: #5eead4;
	--ccp-accent-soft: rgba(45, 212, 191, 0.14);
	--ccp-accent-ring: rgba(45, 212, 191, 0.35);
	--ccp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
	--ccp-shadow-md: 0 4px 12px -2px rgba(0, 0, 0, 0.4);
	--ccp-shadow-lg: 0 24px 48px -12px rgba(0, 0, 0, 0.5);
}

/* ===== Card ===== */
.ccp-card {
	background: var(--ccp-surface);
	border: 1px solid var(--ccp-border);
	border-radius: var(--ccp-radius);
	box-shadow: var(--ccp-shadow-md);
	overflow: hidden;
	transition: box-shadow var(--ccp-transition);
}

.ccp-card:hover {
	box-shadow: var(--ccp-shadow-lg);
}

/* ===== Header ===== */
.ccp-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 18px;
	border-bottom: 1px solid var(--ccp-border);
	background: linear-gradient(180deg, var(--ccp-surface) 0%, var(--ccp-surface-2) 100%);
}

.ccp-header-title {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.ccp-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--ccp-accent);
	box-shadow: 0 0 0 3px var(--ccp-accent-soft);
	flex-shrink: 0;
}

.ccp-title {
	font-family: var(--ccp-font-display);
	font-size: 19px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--ccp-ink);
	margin: 0;
	font-style: italic;
}

.ccp-header-actions {
	display: flex;
	align-items: center;
	gap: 4px;
}

.ccp-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0;
	background: transparent;
	border: 1px solid transparent;
	border-radius: var(--ccp-radius-sm);
	color: var(--ccp-ink-3);
	cursor: pointer;
	transition: all var(--ccp-transition);
}

.ccp-icon-btn:hover {
	color: var(--ccp-ink);
	background: var(--ccp-surface-hover);
}

.ccp-icon-btn:focus-visible {
	outline: 2px solid var(--ccp-accent-ring);
	outline-offset: 2px;
}

/* ===== Body ===== */
.ccp-body {
	padding: 16px 18px;
}

/* ===== Editor ===== */
.ccp-editor {
	border: 1px solid var(--ccp-border);
	border-radius: var(--ccp-radius);
	overflow: hidden;
	background: var(--ccp-surface);
	transition: border-color var(--ccp-transition), box-shadow var(--ccp-transition);
}

.ccp-editor:focus-within {
	border-color: var(--ccp-accent);
	box-shadow: 0 0 0 3px var(--ccp-accent-ring);
}

.ccp-editor-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
	padding: 6px 8px;
	background: var(--ccp-surface-2);
	border-bottom: 1px solid var(--ccp-border);
	flex-wrap: wrap;
}

.ccp-toolbar-left,
.ccp-toolbar-right {
	display: flex;
	align-items: center;
	gap: 2px;
	flex-wrap: wrap;
}

.ccp-chip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 10px;
	background: transparent;
	border: 1px solid transparent;
	border-radius: var(--ccp-radius-xs);
	color: var(--ccp-ink-2);
	font-family: inherit;
	font-size: 12.5px;
	font-weight: 500;
	cursor: pointer;
	transition: all var(--ccp-transition);
	white-space: nowrap;
}

.ccp-chip svg {
	flex-shrink: 0;
	opacity: 0.7;
}

.ccp-chip:hover:not(:disabled) {
	background: var(--ccp-surface-hover);
	color: var(--ccp-ink);
}

.ccp-chip:hover:not(:disabled) svg {
	opacity: 1;
}

.ccp-chip:focus-visible {
	outline: 2px solid var(--ccp-accent-ring);
	outline-offset: 2px;
}

.ccp-chip:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.ccp-chip-primary {
	background: var(--ccp-accent);
	color: #fff;
	border-color: var(--ccp-accent);
}

.ccp-chip-primary svg {
	opacity: 1;
}

.ccp-chip-primary:hover:not(:disabled) {
	background: var(--ccp-accent-hover);
	border-color: var(--ccp-accent-hover);
	color: #fff;
}

.ccp-chip.ccp-chip-success {
	background: var(--ccp-success);
	border-color: var(--ccp-success);
	color: #fff;
}

.ccp-chip.ccp-chip-success:hover {
	background: var(--ccp-success);
	color: #fff;
}

.ccp-textarea {
	display: block;
	width: 100%;
	padding: 14px 16px;
	border: 0;
	outline: none;
	resize: vertical;
	background: var(--ccp-surface);
	color: var(--ccp-ink);
	font-family: var(--ccp-font-mono);
	font-size: 14px;
	line-height: 1.6;
	letter-spacing: -0.005em;
	tab-size: 4;
}

.ccp-textarea::placeholder {
	color: var(--ccp-ink-4);
	font-style: italic;
}

.ccp-textarea::-webkit-scrollbar { width: 10px; }
.ccp-textarea::-webkit-scrollbar-track { background: transparent; }
.ccp-textarea::-webkit-scrollbar-thumb {
	background: var(--ccp-border-strong);
	border-radius: 10px;
	border: 2px solid var(--ccp-surface);
}
.ccp-textarea::-webkit-scrollbar-thumb:hover { background: var(--ccp-ink-4); }

/* ===== Inline stats — sits INSIDE the editor card, below the textarea ===== */
.ccp-stats-inline {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 4px 8px;
	padding: 8px 14px;
	border-top: 1px solid var(--ccp-border);
	background: var(--ccp-surface-2);
	font-size: 11.5px;
	color: var(--ccp-ink-3);
	line-height: 1.4;
}

.ccp-stat-inline {
	display: inline-flex;
	align-items: baseline;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.ccp-stat-inline strong {
	font-family: var(--ccp-font-mono);
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ccp-ink);
	letter-spacing: -0.01em;
	transition: color 250ms ease;
}

.ccp-stat-inline strong.ccp-stat-updated {
	color: var(--ccp-accent);
}

.ccp-stat-divider {
	color: var(--ccp-ink-4);
	opacity: 0.5;
	user-select: none;
}

.ccp-stat-hidden {
	display: none;
}

/* ===== Primary format strip — the "popular" options, front and center ===== */
.ccp-primary-formats {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 6px;
	margin-top: 14px;
}

.ccp-primary-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 11px 10px;
	background: var(--ccp-surface);
	border: 1px solid var(--ccp-border);
	border-radius: var(--ccp-radius-sm);
	color: var(--ccp-ink);
	font-family: var(--ccp-font-mono);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: -0.01em;
	cursor: pointer;
	text-align: center;
	transition: all var(--ccp-transition);
	min-height: 42px;
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ccp-primary-btn:hover {
	border-color: var(--ccp-accent);
	color: var(--ccp-accent);
	background: var(--ccp-accent-soft);
	transform: translateY(-1px);
	box-shadow: var(--ccp-shadow-sm);
}

.ccp-primary-btn:focus-visible {
	outline: 2px solid var(--ccp-accent-ring);
	outline-offset: 2px;
}

.ccp-primary-btn:active {
	transform: translateY(0);
}

.ccp-primary-btn[aria-pressed="true"] {
	background: var(--ccp-accent);
	color: #fff;
	border-color: var(--ccp-accent);
	box-shadow: 0 2px 8px -2px var(--ccp-accent-ring);
}

.ccp-primary-btn[aria-pressed="true"]:hover {
	background: var(--ccp-accent-hover);
	color: #fff;
}

/* ===== "More formats" disclosure — uses native <details> ===== */
.ccp-more {
	margin-top: 10px;
	border: 1px solid var(--ccp-border);
	border-radius: var(--ccp-radius-sm);
	background: var(--ccp-surface);
	overflow: hidden;
	transition: border-color var(--ccp-transition);
}

.ccp-more[open] {
	border-color: var(--ccp-border-strong);
}

/* Hide the native triangle marker */
.ccp-more summary {
	list-style: none;
}
.ccp-more summary::-webkit-details-marker {
	display: none;
}

.ccp-more-summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 10px 14px;
	cursor: pointer;
	user-select: none;
	transition: background var(--ccp-transition);
}

.ccp-more-summary:hover {
	background: var(--ccp-surface-hover);
}

.ccp-more-summary:focus-visible {
	outline: 2px solid var(--ccp-accent-ring);
	outline-offset: -2px;
}

.ccp-more-left {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.ccp-more-chevron {
	flex-shrink: 0;
	color: var(--ccp-ink-3);
	transition: transform var(--ccp-transition);
}

.ccp-more[open] .ccp-more-chevron {
	transform: rotate(90deg);
	color: var(--ccp-accent);
}

.ccp-more-label {
	font-size: 13px;
	font-weight: 600;
	color: var(--ccp-ink-2);
	letter-spacing: -0.005em;
}

.ccp-more[open] .ccp-more-label {
	color: var(--ccp-ink);
}

.ccp-more-count {
	font-size: 11px;
	font-weight: 500;
	color: var(--ccp-ink-4);
	background: var(--ccp-surface-2);
	padding: 2px 8px;
	border-radius: 999px;
	letter-spacing: 0.01em;
	font-variant-numeric: tabular-nums;
}

.ccp-more[open] .ccp-more-count {
	background: var(--ccp-accent-soft);
	color: var(--ccp-accent);
}

/* ===== Advanced format buttons inside the disclosure ===== */
.ccp-advanced-formats {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 4px 14px 14px;
	border-top: 1px solid var(--ccp-border);
}

.ccp-format-group {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding-top: 8px;
}

.ccp-format-group-label {
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--ccp-ink-4);
	padding-left: 2px;
}

.ccp-format-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}

.ccp-format-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 6px 12px;
	background: var(--ccp-surface);
	border: 1px solid var(--ccp-border);
	border-radius: var(--ccp-radius-xs);
	color: var(--ccp-ink-2);
	font-family: var(--ccp-font-mono);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: -0.005em;
	cursor: pointer;
	transition: all var(--ccp-transition);
	line-height: 1.3;
	white-space: nowrap;
}

.ccp-format-btn:hover {
	border-color: var(--ccp-accent);
	color: var(--ccp-accent);
	background: var(--ccp-accent-soft);
}

.ccp-format-btn:focus-visible {
	outline: 2px solid var(--ccp-accent-ring);
	outline-offset: 2px;
}

.ccp-format-btn[aria-pressed="true"] {
	background: var(--ccp-accent);
	color: #fff;
	border-color: var(--ccp-accent);
}

.ccp-format-btn[aria-pressed="true"]:hover {
	background: var(--ccp-accent-hover);
	color: #fff;
}

/* ===== Footer ===== */
.ccp-footer {
	padding: 8px 18px;
	border-top: 1px solid var(--ccp-border);
	background: var(--ccp-surface-2);
	display: flex;
	align-items: center;
	justify-content: center;
}

.ccp-hint {
	font-size: 11px;
	color: var(--ccp-ink-4);
	text-align: center;
}

.ccp-hint kbd {
	display: inline-block;
	padding: 1px 5px;
	margin: 0 1px;
	font-family: var(--ccp-font-mono);
	font-size: 10px;
	font-weight: 500;
	color: var(--ccp-ink-2);
	background: var(--ccp-surface);
	border: 1px solid var(--ccp-border-strong);
	border-bottom-width: 2px;
	border-radius: 4px;
	line-height: 1.3;
}

/* ===== Toast ===== */
.ccp-toast {
	position: absolute;
	bottom: 16px;
	left: 50%;
	transform: translate(-50%, 8px);
	padding: 9px 16px;
	background: var(--ccp-ink);
	color: var(--ccp-surface);
	font-size: 12.5px;
	font-weight: 500;
	border-radius: 999px;
	box-shadow: var(--ccp-shadow-lg);
	opacity: 0;
	pointer-events: none;
	transition: opacity 220ms ease, transform 220ms ease;
	white-space: nowrap;
	z-index: 10;
	max-width: calc(100% - 40px);
	text-overflow: ellipsis;
	overflow: hidden;
}

.ccp-toast.ccp-toast-visible {
	opacity: 1;
	transform: translate(-50%, 0);
}

/* ===== Responsive ===== */
@media (max-width: 720px) {
	.ccp-header { padding: 12px 14px; }
	.ccp-title { font-size: 17px; }
	.ccp-body { padding: 14px; }

	.ccp-primary-formats {
		grid-template-columns: repeat(3, 1fr);
	}

	.ccp-stats-inline {
		font-size: 11px;
		padding: 7px 10px;
		gap: 3px 6px;
	}

	.ccp-stat-inline strong {
		font-size: 12px;
	}

	.ccp-textarea {
		font-size: 13.5px;
		padding: 12px 14px;
	}

	.ccp-editor-toolbar {
		padding: 5px 6px;
	}

	.ccp-chip {
		padding: 5px 8px;
		font-size: 12px;
	}

	/* Hide chip labels on mobile, keep icons only */
	.ccp-chip-label {
		display: none;
	}

	.ccp-chip {
		gap: 0;
	}
}

@media (max-width: 460px) {
	.ccp-primary-formats {
		grid-template-columns: repeat(2, 1fr);
	}

	.ccp-primary-btn {
		font-size: 12.5px;
		padding: 10px 8px;
		min-height: 40px;
	}

	.ccp-toolbar-left,
	.ccp-toolbar-right {
		flex: 1;
		justify-content: center;
	}

	/* On very narrow screens, stats wrap gracefully */
	.ccp-stat-divider {
		display: none;
	}

	.ccp-stats-inline {
		gap: 3px 10px;
	}
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
	.ccp-wrap,
	.ccp-wrap *,
	.ccp-wrap *::before,
	.ccp-wrap *::after {
		transition: none !important;
		animation: none !important;
	}
}