/*
	display-app — adds the macOS chrome strip with traffic-light dots.
	Used by app mode (terminal, Affinity, etc.) and browser mode (which
	layers more on top in display-browser.css).
*/

.display-app {
	--browser-chrome:  #dee1e6;
	--browser-divider: #c4c7ca;
	--browser-ink:     #3c4043;

	.chrome {
		display: grid;
		grid-template-columns: auto 1fr;
		align-items: center;
		column-gap: 0.75rem;
		padding: 0.6rem 0.75rem;
		background: var(--browser-chrome);
		color: var(--browser-ink);
		border-bottom: 1px solid var(--browser-divider);
	}

	.dots {
		display: flex;
		gap: 0.4rem;

		span {
			display: block;
			width: 0.75rem;
			height: 0.75rem;
			border-radius: 50%;
		}

		span:nth-child(1) { background: #ff5f57; }
		span:nth-child(2) { background: #febc2e; }
		span:nth-child(3) { background: #28c840; }
	}
}