/* The converter (/convert): two panes that scroll inside the window. */

@layer pages {
	/* A label and the control it names are one thing. The row they sit in wraps
	   between pairs and never inside one, so a narrow window cannot leave "To" on
	   a line by itself with its toggle on the next. */
	.control-pair {
		flex-wrap: nowrap;
	}

	/* The result controls stay together at the end of the row. The output format
	   is last, even when the JSON layout selector appears. */
	.control-group {
		justify-content: flex-end;
	}

	/* Keep the selected format or JSON layout visible on narrow screens, where
	   the top bar hides its own toggle labels. */
	.dustfmt-page .toggle-label {
		display: grid;
	}

	/*
	The two panes are one grid, so the document and the result share a row and
	a height:

	    dochead | reshead      auto
	    doc     | res          1fr

	One column on a phone, in reading order. The status line sits beside its
	heading.
	*/
	.grid.panes {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"dochead"
			"doc"
			"reshead"
			"res";
		gap: var(--space-3) var(--space-5);
	}

	.pane-head-document {
		grid-area: dochead;
	}

	.pane-body-document {
		grid-area: doc;
	}

	.pane-head-result {
		grid-area: reshead;
	}

	.pane-body-result {
		grid-area: res;
	}

	.pane-head {
		display: flex;
		align-items: center;
		gap: var(--space-3);
		min-inline-size: 0;

		> .section-title {
			flex: 1;
			min-inline-size: 0;
		}
	}

	.pane-status:empty {
		display: none;
	}

	.pane-body {
		display: flex;
		flex-direction: column;
		min-inline-size: 0;
	}

	@media (min-width: 48rem) {
		.grid.panes {
			grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
			grid-template-areas:
				"dochead reshead"
				"doc res";
		}
	}

	/*
	Where there is room, the converter is exactly the window and each pane
	scrolls its own content; on a phone it is an ordinary page. Every box down
	the chain sets min-block-size: 0 so it can shrink to the window.
	*/
	@media (min-width: 48rem) and (min-height: 40rem) {
		.dustfmt-page {
			block-size: 100dvb;
			min-block-size: 0;
			overflow: hidden;
		}

		/* The panes take the room that is left, above a small gap at the bottom
		of the window. */
		.dustfmt-page > .content {
			flex: 1;
			min-block-size: 0;
			gap: var(--space-5);
			padding-block: var(--space-5) var(--space-3);
		}

		.dustfmt-page .tool-panes {
			flex: 1;
			min-block-size: 0;
		}

		/* The heading row takes what it needs; the bodies take the rest. */
		.dustfmt-page .grid.panes {
			flex: 1;
			min-block-size: 0;
			grid-template-rows: auto minmax(0, 1fr);
		}

		.dustfmt-page .pane-body {
			min-block-size: 0;
		}

		/* The box the document is typed into fills its cell, and offers no drag
		handle that would fight the layout. */
		.dustfmt-page textarea.field {
			flex: 1;
			/* Here the field fills its grid row, so it drops its usual 60dvh
			cap. */
			max-block-size: none;
			min-block-size: 0;
			resize: none;
		}

		/* The result is a figure holding a panel, or an alert; whichever it is
		fills the cell, and the panel is what scrolls. */
		.dustfmt-page .pane-body-result > * {
			flex: 1;
			min-block-size: 0;
		}

		.dustfmt-page .pane-body-result pre.panel {
			flex: 1;
			min-block-size: 0;
			overflow: auto;
		}
	}

	/* Converter controls belong to their pane, not a wrapping page-wide toolbar. */
	.dustfmt-page {
		.dustfmt-example {
			display: flex;
			align-items: center;
			gap: var(--space-3);
			flex-wrap: wrap;

			> label {
				align-items: center;
			}
		}

		.dustfmt-input-controls {
			grid-area: doccontrols;
			min-inline-size: 0;
		}

		.dustfmt-output-controls {
			grid-area: rescontrols;
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			gap: var(--space-3);
			min-inline-size: 0;

		}

		input[type="file"] {
			min-inline-size: 0;
			max-inline-size: 100%;
		}

		.pane-head {
			flex-wrap: wrap;
		}

		.pane-body-document > [data-tron-view="visualizer"] {
			flex: 1;
			min-block-size: 0;
			min-inline-size: 0;
			overflow: auto;
		}

		.dustfmt-result {
			display: flex;
			flex-direction: column;
			flex: 1;
			min-block-size: 0;
			min-inline-size: 0;
			padding: var(--space-4);
			overflow: hidden;

			> [data-tron-view] {
				display: flex;
				flex-direction: column;
				flex: 1;
				min-block-size: 0;
				min-inline-size: 0;
				overflow: visible;
			}

			figure.code-block {
				display: flex;
				flex-direction: column;
				flex: 1;
				min-block-size: 0;
				min-inline-size: 0;
				overflow: visible;

				pre.panel {
					flex: 1;
					min-block-size: 0;
					min-inline-size: 0;
					overflow: auto;
				}

				&.tron {
					overflow: visible;

					> :is(table, details) {
						flex-shrink: 0;
					}

					> table:first-of-type {
						display: block;
						flex: 1;
						min-block-size: 0;
						overflow: auto;
					}
				}
			}
		}

		.control-pair {
			flex-wrap: nowrap;

			/* Four format buttons fit the phone pane when its label has its own row. */
			@media (max-width: 47.999rem) {
				flex-direction: column;
				align-items: flex-start;
			}
		}

		.grid.panes {
			grid-template-areas:
				"doccontrols"
				"dochead"
				"doc"
				"rescontrols"
				"reshead"
				"res";

			@media (min-width: 48rem) {
				grid-template-areas:
					"doccontrols rescontrols"
					"dochead reshead"
					"doc res";
			}

			@media (min-width: 48rem) and (min-height: 40rem) {
				grid-template-rows: auto auto minmax(0, 1fr);
			}
		}
	}
}