:root {
	--key-gap: 0.3rem;
	--row-gap: 0.6rem;
	--key-h: 2rem;
}

/* Keyboard container */
.keyboard {
	user-select: none;
	touch-action: manipulation;
	margin-top: 0.4rem;
}

/* Panels */
.kb-panel[hidden] {
	display: none;
}

/* Strip / deck containers */
.kb-strip,
.kb-band,
.kb-deck {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin: 0;
}

/* Common row mechanics */
.kb-strip-row,
.kb-band-row,
.kb-deck-row {
	display: grid;
	align-items: stretch;
	gap: var(--key-gap);
	margin-bottom: var(--row-gap);
}

/* Strip-specific: 6 columns */
.kb-strip-row {
	grid-template-columns: repeat(6, 1fr);
}

/* Band-specific: 5 columns */
.kb-band-row {
	grid-template-columns: repeat(5, 1fr);
}

/* Deck-specific: 4 columns */
.kb-deck-row {
	grid-template-columns: repeat(4, 1fr);
}

/* Keys */
.kb-key {
	min-height: var(--key-h);
	padding: 0.5rem;
	font-size: 1.2rem;
	border: 1px solid #bbb;
	border-radius: 0.4rem;
	background: #f8f8f8;
}

/* Active feedback */
.kb-key:active {
	background: #ddd;
}

/* Width modifiers */
.double-wide   { grid-column: span 2; }
.triple-wide   { grid-column: span 3; }

/* Spacer (blank grid cell, NOT a key) */
.kb-spacer {
	flex: 0 0 auto;
	border: none;
	background: transparent;
	pointer-events: none;
	width: 0.6rem;        /* horizontal gap */
	height: 0;            /* critical */
	padding: 0;
	margin: 0;
}

/* Labels / legends (non-interactive) */
.kb-key-label {
	pointer-events: none;
	background: transparent;
	border: none;
	text-align: center;
	font-size: 0.9rem;
}

/* Divider between logical sections */
.kb-divider {
	height: var(--row-gap);		/* reserve space */
	position: relative;			/* added ! */
	/*	display: flex;
	align-items: center; */
}

.kb-divider::before {
	content: "";
	width: 100%;
	
/*  following five were omitted in newer css  */
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 3px;
	
	border-top: 2px solid rgba(8,7,6,0.5);
}

/*	to dim all the search buttons once a search button is clicked! */

.kb-cooldown {
	opacity: 0.5;
	pointer-events: none;
}