/**
 * Number Place board and number pad.
 */

.pzar-modal {
	--pzar-np-line: var(--pzar-line);
	--pzar-np-line-strong: var(--pzar-muted);
	--pzar-np-given: var(--pzar-text);
	--pzar-np-entry: var(--pzar-accent);
}

.pzar-np {
	display: grid;
	grid-template-columns: repeat( 9, 1fr );
	box-sizing: border-box;
	/* Fill the width, but never grow taller than the space left by the header
	   and the number pad. The floor keeps short landscape screens usable. */
	width: min( 100%, max( 9rem, min( 26rem, calc( 100vh - 19rem ) ) ) );
	aspect-ratio: 1;
	margin: auto;
	border: 2px solid var(--pzar-np-line-strong);
	border-radius: 4px;
	background: var(--pzar-surface);
	overflow: hidden;
}

.pzar-np__cell {
	position: relative;
	display: grid;
	box-sizing: border-box;
	place-items: center;
	border-right: 1px solid var(--pzar-np-line);
	border-bottom: 1px solid var(--pzar-np-line);
	background: transparent;
	touch-action: manipulation;
	user-select: none;
	-webkit-user-select: none;
	-webkit-tap-highlight-color: transparent;
}

.pzar-np__cell:nth-child( 3n ) {
	border-right: 2px solid var(--pzar-np-line-strong);
}

.pzar-np__cell:nth-child( 9n ) {
	border-right: 0;
}

.pzar-np__cell:nth-child( n+19 ):nth-child( -n+27 ),
.pzar-np__cell:nth-child( n+46 ):nth-child( -n+54 ) {
	border-bottom: 2px solid var(--pzar-np-line-strong);
}

.pzar-np__cell:nth-child( n+73 ) {
	border-bottom: 0;
}

.pzar-np__value {
	font-size: clamp( 0.95rem, 4.4vw, 1.4rem );
	font-weight: 500;
	line-height: 1;
	color: var(--pzar-np-entry);
	pointer-events: none;
}

.pzar-np__cell.is-given .pzar-np__value {
	color: var(--pzar-np-given);
	font-weight: 700;
}

.pzar-np__cell.is-hint .pzar-np__value {
	color: var(--pzar-warn);
}

.pzar-np__cell.is-conflict .pzar-np__value {
	color: var(--pzar-danger);
}

.pzar-np__notes {
	position: absolute;
	inset: 8%;
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	color: var(--pzar-muted);
	font-size: clamp( 0.4rem, 1.7vw, 0.58rem );
	line-height: 1;
	pointer-events: none;
}

.pzar-np__note {
	display: grid;
	place-items: center;
}

.pzar-np__cell.is-peer {
	background: var(--pzar-surface-2);
}

.pzar-np__cell.is-same {
	background: var(--pzar-accent-soft);
}

.pzar-np__cell.is-conflict {
	background: var(--pzar-danger-soft);
}

.pzar-np__cell.is-selected {
	background: var(--pzar-accent);
}

.pzar-np__cell.is-selected .pzar-np__value,
.pzar-np__cell.is-selected .pzar-np__notes {
	color: var(--pzar-accent-contrast);
}

/* -------------------------------------------------------------------------
 * Number pad
 * ---------------------------------------------------------------------- */

.pzar-np__pad {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	width: min( 100%, 26rem );
	margin: 0 auto;
}

.pzar-np__keys {
	display: grid;
	grid-template-columns: repeat( 9, 1fr );
	gap: 0.25rem;
}

.pzar-np__key {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 3 / 4;
	border: 1px solid var(--pzar-line);
	border-radius: var(--pzar-radius);
	background: var(--pzar-surface);
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}

.pzar-np__key-digit {
	font-size: clamp( 1rem, 4.5vw, 1.35rem );
	font-weight: 600;
	line-height: 1;
}

.pzar-np__key-count {
	position: absolute;
	top: 0.1rem;
	right: 0.2rem;
	color: var(--pzar-muted);
	font-size: 0.55rem;
	line-height: 1;
}

.pzar-np__key.is-done {
	opacity: 0.35;
}

.pzar-np__key.is-active {
	border-color: var(--pzar-accent);
	background: var(--pzar-accent);
	color: var(--pzar-accent-contrast);
}

.pzar-np__key.is-active .pzar-np__key-count {
	color: inherit;
}

.pzar-np__actions {
	display: grid;
	grid-template-columns: repeat( 5, 1fr );
	gap: 0.25rem;
}

.pzar-np__action {
	display: grid;
	place-items: center;
	min-height: 2.6rem;
	padding: 0 0.25rem;
	border: 1px solid var(--pzar-line);
	border-radius: var(--pzar-radius);
	background: var(--pzar-surface);
	font-size: 0.72rem;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	touch-action: manipulation;
}

.pzar-np__action.is-active,
.pzar-np__action[aria-pressed="true"] {
	border-color: var(--pzar-accent);
	background: var(--pzar-accent);
	color: var(--pzar-accent-contrast);
}