/* demo.css - the bar that says this is a demo.
   main.BuildDemo.php inserts .demo-bar between </header> and <main>. */

/* .app in style.css is a grid of two named rows, "topbar" and "main", and a
   child with no grid-area of its own lands in an implicit third row UNDER
   the page. That is where the bar was, at the bottom of the screen. The grid
   gets a third named row between the two, and the bar is put in it. */
.app {
	grid-template-rows: var(--topbar-h) auto minmax(0, 1fr);
	grid-template-areas: "topbar" "demo" "main";
}

.demo-bar {
	grid-area: demo;
	display: flex;
	gap: 10px;
	align-items: baseline;
	flex-wrap: wrap;
	padding: 7px 14px;
	border-bottom: 1px solid var(--warn-soft-line, var(--line));
	background: var(--warn-soft, var(--bg-bar));
	color: var(--ink);
	font-size: 12.5px;
	line-height: 1.45;
}

.demo-bar .demo-tag {
	flex: none;
	padding: 1px 7px;
	border-radius: 4px;
	background: var(--warn, var(--accent));
	color: var(--bg-bar);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.demo-bar .demo-text {
	flex: 1 1 320px;
	min-width: 0;
	color: var(--ink);
}

.demo-bar b {
	font-weight: 600;
	color: var(--ink);
}

form[data-demo-write="1"] [disabled] {
	cursor: not-allowed;
}