/* The inspector's own stylesheet (docs/architecture/inspector.md, section 6): token overrides for a calm,
   wide tool page, and the rules of the inspector's own content (the layout, the demo stage, the property
   editor, the tables). The components keep their own stylesheets; nothing here restyles one. */
@layer site {
	:root {
		--page-width: 96rem;
		--content-padding: 1.5rem;
		--font-size-control: 1rem;
		--color-text: #1d2733;
		--color-link: #0b5c8a;
		--color-link-visited: #5a3a8a;
		--color-border: #5b6770;
		--color-surface: #f6f8f9;
		--color-primary: #1f3a44;
		--color-on-primary: #fff;
		--color-primary-hover: #e8eef0;
		--color-on-primary-hover: #1f3a44;
		--color-accent: #0b5c8a;
		--header-ratio: auto;
		--header-background: #e3eaee;
		--site-name-color: #1f3a44;
		--site-name-size: 1.5em;
		--site-name-margin: 0.6em 0 0.8em;
		--site-name-shadow: none;
	}

	/* The language menu in the header's corner: room for its two items on one row (a wrapping flex list
	   has no usable max-content size), wrapping only where the screen is narrower than that. */
	.inspector-languages {
		inline-size: 20rem;
		max-inline-size: 100%;
	}

	/* The tree on the left, the detail pane on the right; one column on a narrow screen. */
	.inspector-layout {
		display: grid;
		grid-template-columns: minmax(16rem, 1fr) minmax(0, 3fr);
		gap: var(--space-3);
		align-items: start;
	}

	.inspector-layout > main {
		min-inline-size: 0;
		padding-block-start: var(--space-3);
	}

	.inspector-tree {
		position: sticky;
		inset-block-start: 0;
		max-block-size: 100vh;
		overflow: auto;
		padding: var(--space-3);
		border-inline-end: 1px solid var(--color-border);
	}

	@media (width < 768px) {
		.inspector-layout {
			grid-template-columns: 1fr;
		}

		.inspector-tree {
			position: static;
			max-block-size: none;
			border-inline-end: 0;
			border-block-end: 1px solid var(--color-border);
		}
	}

	h1 {
		margin-block: 0 var(--space-2);
		text-align: start;
	}

	h2 {
		margin-block: var(--space-3) var(--space-2);
		padding-block-start: var(--space-3);
		border-block-start: 1px solid var(--color-border);
		font-size: 1.25em;
	}

	.inspector-summary {
		font-size: 1.1em;
	}

	/* The demo stage: the demo as it renders, on a bordered surface; a skip link in the demo appears
	   inside the stage when it has focus. */
	.inspector-stage {
		position: relative;
		padding: var(--space-3);
		overflow: auto;
		background: var(--color-background);
		border: 2px dashed var(--color-border);
		border-radius: var(--radius-panel);
	}

	/* The property editor: fields in columns that wrap, the actions and the status line below. */
	.inspector-editor {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
		gap: var(--space-2) var(--space-3);
		padding: var(--space-3);
		background: var(--color-surface);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-panel);
	}

	.inspector-field label {
		display: block;
		font-weight: bold;
	}

	.inspector-field-description {
		margin: 0 0 var(--space-1);
		font-size: var(--font-size-small);
	}

	.inspector-field input,
	.inspector-field select {
		box-sizing: border-box;
		inline-size: 100%;
		min-block-size: var(--touch-target);
		padding: var(--space-1) var(--space-2);
		font: inherit;
		color: var(--color-text);
		background: var(--color-background);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-panel);
	}

	.inspector-field input[type="checkbox"] {
		inline-size: 1.5rem;
		block-size: 1.5rem;
		min-block-size: 0;
		margin: var(--space-2) 0;
	}

	.inspector-field [aria-invalid="true"] {
		border: 2px solid var(--color-danger);
	}

	.inspector-field-error {
		margin: var(--space-1) 0 0;
		font-weight: bold;
		color: var(--color-danger);
	}

	.inspector-editor-actions {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-2);
		grid-column: 1 / -1;
	}

	.inspector-editor > [role="status"] {
		grid-column: 1 / -1;
	}

	/* The tables of properties, events and keys: the cells wrap, long identifiers break, and a table that
	   is still wider than a phone screen scrolls inside its own box instead of the page. */
	.inspector-table {
		overflow-x: auto;
	}

	table {
		inline-size: 100%;
		font-size: var(--font-size-small);
	}

	th,
	td {
		padding: var(--space-1) var(--space-2);
		text-align: start;
		vertical-align: top;
		overflow-wrap: anywhere;
		border: 1px solid var(--color-border);
	}

	thead th {
		background: var(--color-surface);
	}

	code,
	kbd {
		font-size: 1em;
	}

	.inspector-stage,
	.inspector-readme {
		overflow-wrap: anywhere;
	}

	/* The README: the component's own prose, set apart. */
	.inspector-readme {
		padding-inline-start: var(--space-3);
		border-inline-start: 0.3em solid var(--color-border);
	}

	.inspector-readme h3 {
		margin-block-start: var(--space-2);
	}

	/* A code block of the README (a markup diagram) scrolls in its own box, never the page. */
	.inspector-readme pre {
		max-inline-size: 100%;
		overflow-x: auto;
	}

	/* Forced colours: the borders and the state come from the system colours. */
	@media (forced-colors: active) {
		.inspector-stage,
		.inspector-editor,
		.inspector-field [aria-invalid="true"] {
			border-color: CanvasText;
		}

		.inspector-field [aria-invalid="true"] {
			border-style: double;
		}
	}
}