:root {
	--TEAL: #105C78;
	--CERULEAN: #00ADDC;
	--LIME: #B2D33B;
	--ORANGE: #F68B1F;
	--FUCHSIA: #B72467;

	--GOLDENROD: #FFCD34;
	--CRIMSON: #DB3526;
	--VIOLET: #51499E;
	--CORNFLOWER: #4881C3;
	--JADE: #25B574;

	--GREY: #acb2ae;
	--LIGHT: #ccffff;

	--TEAL-TINT: #E8F1F4;
	--TEAL-TINT-STRONG: #CFE1E7;
	--CERULEAN-TINT: #E1F6FC;
	--GREY-LIGHT: #E3E6E4;
	--GREY-BORDER: #ACB2AE;
	--INK: #0E516A;
	--INK-MUTED: #4A7D8F;
	--INK-FAINT: #7398A6;
	--TEAL-SOFT: #6497A8;
	--SURFACE-TINT: #F8FAFB;
}

#viewer-tree[hidden],
#tree-controls[hidden],
#view-toggle[hidden],
#viewer-breadcrumb[hidden] {
	display: none;
}

main, main * {
	box-sizing: border-box;
}

main {
	display: flex;
	flex-direction: column;
	margin-left: auto;
	margin-right: auto;
	max-width: 1600px;
	width: 100%;
	padding: 0 20px 40px;
	font-family: Arial, Helvetica, sans-serif;
	color: var(--INK);
}

#page-title {
	padding: 20px 0 0;
	color: var(--TEAL);
}

.description-text {
	padding: 10px 0;
	line-height: 1.5;
}

.description-text.small {
	font-size: 0.9em;
	color: var(--INK-MUTED);
}

.description-text code,
#viewer-description code {
	background: var(--TEAL-TINT);
	border: 1px solid var(--GREY-BORDER);
	border-radius: 3px;
	padding: 0 4px;
	font-family: Consolas, "Courier New", monospace;
}

a {
	color: var(--CERULEAN);
}

section {
	margin-top: 20px;
}

h2 {
	color: var(--TEAL);
	border-bottom: 3px solid var(--CERULEAN);
	padding-bottom: 4px;
}

.download-card {
	display: flex;
	align-items: center;
	gap: 16px;
	background: #fff;
	border: 1px solid var(--GREY-BORDER);
	border-left: 4px solid var(--TEAL);
	border-radius: 6px;
	padding: 16px 20px;
	box-shadow: 0 1px 4px rgba(14, 81, 106, 0.15);
}

.download-icon {
	width: 40px;
	height: 40px;
	flex-shrink: 0;
}

.download-icon-bg {
	fill: var(--TEAL);
}

.download-icon-glyph {
	stroke: #fff;
}

.download-card-info {
	flex: 1;
}

.download-card-title {
	font-size: 1.2em;
	font-weight: bold;
	color: var(--TEAL);
}

.download-card-meta {
	color: var(--INK-MUTED);
	font-size: 0.9em;
}

.download-button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
	background: var(--TEAL);
	color: #fff;
	text-decoration: none;
	font-weight: bold;
	font-size: 1.02em;
	padding: 11px 22px;
	border-radius: 6px;
	white-space: nowrap;
	border: 2px solid var(--CERULEAN);
	box-shadow: 0 2px 6px rgba(16, 92, 120, 0.35);
}

.download-button .btn-icon {
	width: 17px;
	height: 17px;
}

.download-button:hover {
	background: var(--INK);
	border-color: var(--CERULEAN);
	box-shadow: 0 3px 8px rgba(16, 92, 120, 0.45);
}

#browser-layout {
	display: flex;
	gap: 16px;
	margin-top: 10px;
	height: 65vh;
	min-height: 420px;
}

#browser-sidebar {
	width: clamp(200px, 28vw, 300px);
	flex-shrink: 0;
	min-height: 0;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--GREY-BORDER);
	border-radius: 6px;
	overflow: hidden;
}

#schema-search {
	box-sizing: border-box;
	width: 100%;
	padding: 10px 12px;
	border: none;
	border-bottom: 1px solid var(--GREY-BORDER);
	font-size: 0.95em;
}

#schema-search:focus {
	outline: 2px solid var(--CERULEAN);
	outline-offset: -2px;
}

#schema-groups {
	overflow-y: auto;
	flex: 1;
	min-height: 0;
}

#schema-groups-loading {
	padding: 12px;
	color: var(--INK-FAINT);
	font-style: italic;
}

.schema-group summary {
	cursor: pointer;
	padding: 8px 12px;
	font-weight: bold;
	color: var(--TEAL);
	background: var(--TEAL-TINT);
	border-bottom: 1px solid var(--GREY-BORDER);
}

.schema-group-count {
	font-weight: normal;
	color: var(--TEAL-SOFT);
}

.schema-item-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.schema-item {
	border-bottom: 1px solid var(--GREY-LIGHT);
}

.schema-item-link {
	display: block;
	padding: 7px 12px 7px 20px;
	text-decoration: none;
	color: var(--INK);
	font-size: 0.92em;
	border-left: 3px solid transparent;
}

.schema-item-link:hover {
	background: var(--CERULEAN-TINT);
	border-left-color: var(--CERULEAN);
}

.schema-item-link.active {
	background: var(--TEAL);
	color: #fff;
	border-left-color: var(--LIME);
}

.schema-item-id {
	display: block;
	font-family: Consolas, "Courier New", monospace;
	font-size: 0.85em;
	color: inherit;
	opacity: 0.75;
}

.schema-item.hidden {
	display: none;
}

.schema-group.hidden {
	display: none;
}

#browser-viewer {
	flex: 1;
	min-width: 0;
	min-height: 0;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--GREY-BORDER);
	border-radius: 6px;
	padding: 14px 16px;
}

#viewer-toolbar {
	display: flex;
	flex-direction: column;
	gap: 10px;
	border-bottom: 1px solid var(--GREY-LIGHT);
	padding-bottom: 10px;
}

#viewer-title-block {
	display: flex;
	flex-direction: column;
}

#viewer-breadcrumb {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 6px;
	font-size: 0.82em;
}

#breadcrumb-trail {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 5px;
	min-width: 0;
}

.breadcrumb-link {
	color: var(--CERULEAN);
	text-decoration: underline dotted;
	cursor: pointer;
	white-space: nowrap;
}

.breadcrumb-link:hover {
	background: var(--CERULEAN-TINT);
}

.breadcrumb-current {
	font-weight: bold;
	color: var(--TEAL);
	white-space: nowrap;
}

.breadcrumb-sep {
	color: var(--GREY);
}

#viewer-title {
	font-size: 1.15em;
	font-weight: bold;
	color: var(--TEAL);
}

#viewer-id {
	font-family: Consolas, "Courier New", monospace;
	font-size: 0.85em;
	color: var(--INK-FAINT);
	word-break: break-all;
}

#viewer-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

#viewer-actions-left,
#viewer-actions-right {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.segmented {
	display: inline-flex;
	border: 1px solid var(--TEAL);
	border-radius: 4px;
	overflow: hidden;
}

.view-toggle-btn {
	font-size: 0.85em;
	padding: 6px 12px;
	border: none;
	background: #fff;
	color: var(--TEAL);
	cursor: pointer;
}

.view-toggle-btn + .view-toggle-btn {
	border-left: 1px solid var(--TEAL);
}

.view-toggle-btn:hover {
	background: var(--TEAL-TINT-STRONG);
}

.view-toggle-btn.active {
	background: var(--TEAL);
	color: #fff;
}

#tree-controls {
	display: flex;
	gap: 6px;
}

.tree-ctrl-btn,
#copy-json-btn,
.download-file-link,
#breadcrumb-back-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.85em;
	padding: 6px 10px;
	border-radius: 4px;
	border: 1px solid var(--TEAL);
	background: #fff;
	color: var(--TEAL);
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
}

.btn-icon {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
}

.tree-ctrl-btn:hover,
#copy-json-btn:hover,
.download-file-link:hover,
#breadcrumb-back-btn:hover {
	background: var(--TEAL-TINT-STRONG);
}

#breadcrumb-back-btn {
	font-size: 0.78em;
	padding: 3px 8px;
	flex-shrink: 0;
}

#copy-json-btn.copied {
	background: var(--JADE);
	border-color: var(--JADE);
	color: #fff;
}

#viewer-description {
	color: var(--INK-MUTED);
	font-size: 0.92em;
	margin: 10px 0 0;
}

#viewer-empty {
	color: var(--INK-FAINT);
	margin-top: 30px;
	text-align: center;
}

#viewer-json {
	flex: 1;
	min-width: 0;
	min-height: 0;
	max-width: 100%;
	overflow: auto;
	background: var(--SURFACE-TINT);
	border: 1px solid var(--GREY-LIGHT);
	border-radius: 4px;
	padding: 12px;
	margin-top: 10px;
	font-family: Consolas, "Courier New", monospace;
	font-size: 0.88em;
	line-height: 1.45;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

.tok-key { color: var(--TEAL); }
.tok-string { color: var(--JADE); }
.tok-number { color: var(--ORANGE); }
.tok-boolean { color: var(--VIOLET); }
.tok-null { color: var(--CRIMSON); }
a.tok-ref {
	color: var(--CERULEAN);
	text-decoration: underline dotted;
	cursor: pointer;
}
a.tok-ref:hover {
	background: var(--CERULEAN-TINT);
}

#viewer-tree {
	flex: 1;
	min-width: 0;
	min-height: 0;
	display: flex;
	flex-direction: column;
	margin-top: 10px;
}

#tree-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	font-size: 0.78em;
	color: var(--INK-MUTED);
	padding-bottom: 8px;
}

.legend-item {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.legend-swatch {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	flex-shrink: 0;
}

.legend-structure { background: var(--TEAL); }
.legend-ref { background: var(--CERULEAN); }
.legend-group { background: var(--VIOLET); }
.legend-condition { background: var(--ORANGE); }
.legend-scalar { background: var(--JADE); }
.legend-required { background: var(--GREY); }
.legend-optional {
	background: #fff;
	border: 2px solid var(--GREY);
	width: 6px;
	height: 6px;
}

#tree-canvas-wrap {
	position: relative;
	flex: 1;
	min-width: 0;
	min-height: 0;
	background: var(--SURFACE-TINT);
	border: 1px solid var(--GREY-LIGHT);
	border-radius: 4px;
	overflow: hidden;
}

#tree-canvas {
	display: block;
	width: 100%;
	height: 100%;
	cursor: grab;
}

#tree-tooltip {
	position: fixed;
	z-index: 1000;
	max-width: 320px;
	background: #fff;
	border: 1px solid var(--TEAL);
	border-radius: 6px;
	box-shadow: 0 4px 14px rgba(16, 92, 120, 0.25);
	padding: 10px 12px;
	font-size: 0.82em;
	line-height: 1.4;
	color: var(--INK);
	pointer-events: none;
}

.tt-title {
	font-weight: bold;
	color: var(--TEAL);
	margin-bottom: 2px;
}

.tt-kind {
	display: inline-block;
	font-size: 0.85em;
	padding: 1px 6px;
	border-radius: 3px;
	margin-bottom: 6px;
	color: #fff;
}

.tt-kind-structure { background: var(--TEAL); }
.tt-kind-ref { background: var(--CERULEAN); }
.tt-kind-group { background: var(--VIOLET); }
.tt-kind-condition { background: var(--ORANGE); }
.tt-kind-scalar { background: var(--JADE); }

.tt-row {
	margin-top: 2px;
}

.tt-mono {
	margin-top: 2px;
	padding: 4px 6px;
	background: var(--TEAL-TINT);
	border-radius: 3px;
	font-family: Consolas, "Courier New", monospace;
	font-size: 0.92em;
	word-break: break-all;
	color: var(--INK);
}

.tt-desc {
	margin-top: 6px;
	color: var(--INK-MUTED);
}

.tt-hint {
	margin-top: 6px;
	font-style: italic;
	color: var(--INK-FAINT);
}

@media (max-width: 800px) {
	#browser-layout {
		flex-direction: column;
		height: auto;
		min-height: 0;
	}

	#browser-sidebar {
		width: auto;
		height: 260px;
	}

	#browser-viewer {
		height: 60vh;
		min-height: 400px;
	}

	.download-card {
		flex-wrap: wrap;
	}
}

@media (max-width: 520px) {
	main {
		padding: 0 12px 30px;
	}

	#browser-sidebar {
		height: 200px;
	}

	#browser-viewer {
		padding: 10px 12px;
	}

	.download-button {
		width: 100%;
		justify-content: center;
	}

	#viewer-actions-left,
	#viewer-actions-right {
		width: 100%;
	}

	#viewer-actions-right {
		justify-content: flex-start;
	}

	#tree-legend {
		font-size: 0.72em;
		gap: 5px 10px;
	}
}