/*=== Jelly Cleave =============================================================
The game's looks: a candy factory (see docs/prototype-plan.md, The look). Mist for the tiled floor, storm for the
machinery, the text and the cleaver, and the three jellies (berry, lemon, lime) bright on it, each with its gloss and
shade; round corners, a soft round face for the title, the keys and the numbers, and the series' mono for the rest.
The palette is palette.css's, written from palette.js; it is mapped onto the chassis's tokens (core/style/base.css)
first, so its lobby, cards and keys take it; the batch's screen and the shift report follow. The tray itself is a
canvas, drawn by tray.js from the same palette */

:root {
	color-scheme: light;

	--font: "IBM Plex Mono", "Courier New", Courier, monospace;
	--round: "Fredoka", "Trebuchet MS", system-ui, sans-serif; /* The title, the keys, the numbers */
	--display-font: var(--round); /* The chassis's title, keys and lobby headings */

	/* The chassis's tokens */
	--bg: var(--floor);
	--plate: var(--floor-2);
	--field: var(--floor-3);
	--key: var(--floor-2);
	--border: var(--storm);
	--text: var(--storm);
	--muted: var(--storm-2);
	--accent: var(--berry);
	--accent-text: var(--floor-2);
	--primary-border: var(--storm);
	--select: var(--berry);
	--select-wash: color-mix(in srgb, var(--berry) 16%, transparent);
	--select-text: var(--berry-dark);
	--focus: var(--lemon);
	--shadow-color: color-mix(in srgb, var(--storm) 55%, transparent);
	--radius: 14px;
}

/* The factory floor: square tiles with a fine grout */
html {
	background-color: var(--floor);
	background-image:
		linear-gradient(var(--tile) 1.5px, transparent 1.5px),
		linear-gradient(90deg, var(--tile) 1.5px, transparent 1.5px);
	background-size: 44px 44px;
}

/* The rest of what is round (the chassis's title, keys and headings take --display-font) */
.batch_title,
.report_title,
.quota_count,
.report_verdict {
	font-family: var(--round);
	font-weight: 700;
}

.title {
	letter-spacing: 1px;
}

.title_accent {
	color: var(--berry);
}

.button {
	letter-spacing: 1px;
}


/*=== The batch's bar ==========================================================*/

#screen_batch {
	gap: 10px;
	user-select: none;
	-webkit-user-select: none;
}

.batch_bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	padding-bottom: 8px;
	border-bottom: 2px solid var(--storm);
}

.batch_title {
	flex: 1 1 100%;
	font-size: 19px;
}

.batch_cuts {
	flex: 1;
	color: var(--muted);
	white-space: nowrap;
}

.batch_bar .button.small {
	width: auto;
	flex: none;
}


/*=== The quota ================================================================*/

.quota {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

/* A flavour: its mark, its name, the count, the band, and what's to do */
.quota_row {
	display: grid;
	grid-template-columns: 1.6em 4.6em 2.4em 1fr auto;
	align-items: center;
	gap: 8px;
	padding: 1px 10px;
	border: 2px solid transparent;
	border-radius: var(--radius);
	background: var(--plate);
	transition: background-color var(--snap), border-color var(--snap);
}

.quota_mark {
	font-size: 18px;
	text-align: center;
}

.quota_name {
	text-transform: capitalize;
}

.quota_count {
	font-size: 22px;
	text-align: right;
}

.quota_band,
.quota_todo {
	color: var(--muted);
	white-space: nowrap;
}

.quota_row.met .quota_todo {
	font-weight: 700;
	color: var(--storm);
}

.quota_row.berry .quota_mark { color: var(--berry); }
.quota_row.lemon .quota_mark { color: var(--lemon-dark); }
.quota_row.lime .quota_mark { color: var(--lime); }
.quota_row.berry.met { background: color-mix(in srgb, var(--berry) 22%, var(--plate)); border-color: var(--berry); }
.quota_row.lemon.met { background: color-mix(in srgb, var(--lemon) 26%, var(--plate)); border-color: var(--lemon); }
.quota_row.lime.met { background: color-mix(in srgb, var(--lime) 24%, var(--plate)); border-color: var(--lime); }

/* The partner's quota, as three lamps */
.partner_lamps {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	color: var(--muted);
}

.lamp {
	font-size: 17px;
	opacity: 0.28;
	transition: opacity var(--snap), transform var(--snap);
}

.lamp.lit {
	opacity: 1;
	transform: scale(1.15);
}

.lamp.berry { color: var(--berry); }
.lamp.lemon { color: var(--lemon-dark); }
.lamp.lime { color: var(--lime); }

.lamps_all {
	font-weight: 700;
	color: var(--storm);
}

.batch_notice {
	align-self: stretch;
	margin: 4px 0 0;
	padding: 6px 10px;
	border-radius: var(--radius);
	background: color-mix(in srgb, var(--lemon) 22%, var(--plate));
	animation: notice 260ms ease-out both;
}

.batch_notice.warning {
	background: color-mix(in srgb, var(--berry) 18%, var(--plate));
	color: var(--berry-dark);
}

@keyframes notice {
	from { transform: translateY(-4px); opacity: 0; }
}


/*=== The tray =================================================================*/

.tray_frame {
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* The tray's square takes the pointer; its canvas is drawn past it on every side (tray.js sets the sizes), over
whatever is near, and lets the clicks through, so a tray swinging round is never cut off */
.tray_box {
	position: relative;
	touch-action: none;
	cursor: crosshair;
}

.tray {
	position: absolute;
	z-index: 2;
	display: block;
	pointer-events: none;
}

.tray_hint {
	margin: 2px 0 0;
	min-height: 1.5em;
	color: var(--muted);
	text-align: center;
	font-size: 13px;
}

.tray_keys {
	display: grid;
	grid-template-columns: 1fr 1.4fr 1fr;
	gap: 10px;
}

.tray_keys .button {
	text-align: center;
}

.key_turn .label {
	font-size: 28px;
	line-height: 1;
}

.key_reset.armed {
	background: var(--berry);
	border-color: var(--storm);
	color: var(--floor-2);
}

.key_reset.armed .sub {
	color: var(--floor-2);
}


/*=== The shift report =========================================================*/

.report_title {
	margin: 0 0 2px;
	font-size: 24px;
}

.report_batch {
	margin: 0 0 6px;
	color: var(--muted);
}

/* Under or on par in lemon, over it plainer */
.report_verdict {
	margin: 0 0 10px;
	font-size: 34px;
	line-height: 1.1;
	color: var(--lemon);
	text-shadow: 1px 1px 0 var(--storm);
}

.report_verdict.over {
	color: var(--storm-2);
	text-shadow: none;
}

.report_lines {
	display: grid;
	grid-template-columns: auto 1fr;
	margin: 0 0 14px;
}

.report_lines dt,
.report_lines dd {
	padding: 4px 0;
	border-bottom: 1px dashed color-mix(in srgb, var(--storm) 35%, transparent);
}

.report_lines dt {
	padding-right: 16px;
	color: var(--muted);
}

.report_lines dd {
	margin: 0;
	font-weight: 700;
}

/* Both trays as they ended, side by side */
.report_trays {
	display: flex;
	justify-content: center;
	gap: 14px;
	margin: 0 0 14px;
}

.mini {
	margin: 0;
	flex: 0 1 auto;
}

.mini_grid {
	display: grid;
	grid-template-columns: repeat(10, 1fr);
	gap: 1px;
	width: min(40vw, 180px);
	aspect-ratio: 1;
	padding: 3px;
	border: 3px solid var(--belt);
	border-radius: 8px;
	background: var(--silver);
}

.mini_grid.b {
	border-color: var(--belt-b);
}

.mini_cell {
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 3px;
	background: var(--well);
	font-size: 7px;
	line-height: 1;
}

.mini_cell.berry { background: var(--berry); color: var(--berry-dark); }
.mini_cell.lemon { background: var(--lemon); color: var(--lemon-dark); }
.mini_cell.lime { background: var(--lime); color: var(--lime-dark); }

.mini_caption {
	margin-top: 4px;
	text-align: center;
	font-size: 13px;
	color: var(--muted);
}

.mini.yours .mini_caption {
	color: var(--storm);
	font-weight: 700;
}