/**
 * IA Mode (Information Architecture Debug Mode)
 *
 * Toggle with: body.ia-mode
 * Reveals the semantic structure and data relationships
 *
 * Usage: data-ia="section/key" or data-ia="section" for groups
 * Examples:
 *   data-ia="gem/123"        - root entity
 *   data-ia="info"           - section group
 *   data-ia="info/title"     - field within section
 */

[data-ia] {
	position: relative;
}

/* IA Mode Active */
body.ia-mode [data-ia] {
	/* outline: 1px solid var(--ia-color, dodgerblue); */
	outline-offset: 2px;
}

body.ia-mode [data-ia]::after {
	content: attr(data-ia);
	position: absolute;
	top: 0;
	left: 0;
	transform: translateX(-100%);
	background: var(--ia-color, dodgerblue);
	color: white;
	padding: 2px 8px;
	font-size: 11px;
	font-family: monospace;
	font-weight: normal;
	line-height: 1.4;
	border-radius: 2px;
	z-index: 100;
	white-space: nowrap;
}

/* Root level (entity/id pattern like gem/123) */
body.ia-mode > [data-ia],
body.ia-mode article[data-ia] {
	/* outline: 3px solid var(--ia-root-color, rebeccapurple); */
	outline-offset: 8px;
}

body.ia-mode > [data-ia]::after,
body.ia-mode article[data-ia]::after {
	background: var(--ia-root-color, rebeccapurple);
	font-size: 0.75rem;
	font-weight: bold;
	padding: 0.25em 0.75em;
	top: -1.5em;
	right: auto;
	left: 0;
}