/* TRON byte tables, on documentation pages, the home page console and the
converter. */

@layer components {
	/* TRON keeps byte fields and their meaning together inside the article. */
	.tron {
		max-inline-size: 100%;
		padding: var(--space-4);
		border: 1px solid var(--color-line-low);
		background: rgb(var(--ch-ink) / 92%);
		.tron-bytes {
			width: auto;
			table-layout: auto;
			max-inline-size: 100%;
			border-collapse: collapse;
			font-size: 0.85rem;
			td { padding: var(--space-1); vertical-align: top; border: 0; }
			.tron-offset, .tron-hex { font-family: var(--font-data); font-variant-numeric: tabular-nums; }
			.tron-hex { white-space: pre-wrap; overflow-wrap: anywhere; }
			.tron-meaning { font-family: var(--font-text); overflow-wrap: anywhere; }
			/* Byte colors follow the hl- classes of the text formats: strings, numbers
			and builtin constants keep their colors, while containers, offsets and
			framing stay dim like punctuation. The meaning column is body text and
			its address links read as keys. */
			.tron-offset, .tron-magic .tron-hex, .tron-footer .tron-hex, .tron-unreferenced .tron-hex { color: var(--color-text-dim); }
			.tron-txt .tron-hex, .tron-bin .tron-hex { color: var(--color-code-string); }
			.tron-i64 .tron-hex, .tron-f64 .tron-hex { color: var(--color-warning); }
			.tron-bit .tron-hex, .tron-nil .tron-hex { color: var(--color-code-constant); }
			:is(.tron-arr_leaf, .tron-arr_branch, .tron-map_leaf, .tron-map_branch) .tron-hex { color: var(--color-text-dim); }
			.tron-meaning { color: var(--color-text); }
			.tron-meaning a { color: var(--color-info); }
			.is-linked, tr:focus-visible { outline: 1px solid var(--color-glow); background: rgb(var(--ch-glow) / 10%); }
		}
		@media (max-width: 34rem) {
			.tron-bytes {
				display: block;
				tbody { display: block; }
				tr { display: grid; grid-template-columns: auto minmax(0, 1fr); }
				.tron-meaning { grid-column: 2; }
			}
		}
		@media (forced-colors: active) {
			.tron-bytes { color: CanvasText; }
			.tron-bytes tr { color: CanvasText; }
			.tron-bytes .is-linked, .tron-bytes tr:focus-visible { outline-color: Highlight; }
		}
	}
}