/*
   Color Online.

   Rick's stylesheet, kept as he wrote it. Every rule is scoped inside
   .co-page, because the page now sits in the site header and footer rather
   than standing on its own, and his bare button and body rules would
   otherwise repaint the whole site.

   Nothing about the look has been changed. If it should be restyled to match
   the Bible, Stories, Activities, and Printables pages, that is Rick's call.
*/

.co-page {
	--green: #76ba2b;
	--dark: #25402d;
	--soft: #f4faef;
	font-family: Arial, Helvetica, sans-serif;
	color: var( --dark );
	background: linear-gradient( #c8f0ff, #f2ffdb 52%, #fff5e3 );
}

.co-page * { box-sizing: border-box; }

.co-page button,
.co-page select,
.co-page input { font: inherit; }

.co-page button {
	border: 0;
	border-radius: 14px;
	padding: 12px 14px;
	font-weight: 800;
	cursor: pointer;
	background: #edf4ee;
	color: var( --dark );
}

.co-page button:hover,
.co-page button:focus-visible { outline: 3px solid #88d4f4; transform: translateY( -1px ); }
.co-page button:disabled { opacity: .45; cursor: not-allowed; transform: none; }

.co-page .hero {
	text-align: center;
	padding: 30px 20px 48px;
	background: linear-gradient( 135deg, #69d2ff, #c8f2ff 60%, #f0ffd0 );
	border-bottom: 7px solid rgba( 255, 255, 255, .75 );
}

.co-page .brand {
	display: inline-block;
	background: #fff9;
	padding: 7px 15px;
	border-radius: 999px;
	color: #4f8e18;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: .08em;
}

.co-page .hero h1 { margin: 10px 0 3px; color: var( --green ); font-size: clamp( 2.4rem, 6vw, 4.8rem ); text-shadow: 0 3px #fff; }
.co-page .hero p { margin: 0; font-weight: 700; font-size: 1.15rem; }

.co-page .app {
	max-width: 1480px;
	margin: -25px auto 0;
	padding: 0 18px 36px;
	display: grid;
	grid-template-columns: 300px minmax( 0, 1fr );
	gap: 22px;
	align-items: start;
}

.co-page .tools,
.co-page .board {
	background: #fffffff2;
	border-radius: 24px;
	box-shadow: 0 16px 40px #1c452f26;
	border: 1px solid #fff;
	padding: 20px;
}

.co-page .tools { position: sticky; top: 15px; }
.co-page .tools h2 { text-align: center; margin: 0 0 14px; color: #4f8e18; }

.co-page .palette { display: grid; grid-template-columns: repeat( 5, 1fr ); gap: 10px; margin-bottom: 18px; }

.co-page .swatch {
	padding: 0;
	width: 100%;
	aspect-ratio: 1;
	border-radius: 50%;
	border: 4px solid #fff;
	box-shadow: 0 0 0 2px #dbe7dd;
}

.co-page .swatch.selected { box-shadow: 0 0 0 4px #26392d; }

.co-page .tool-buttons { display: grid; gap: 8px; margin-bottom: 15px; }
.co-page .tool-buttons button.active { background: #dcf6bd; color: #356a12; box-shadow: inset 0 0 0 2px #96ce55; }

.co-page .tools label { font-weight: 900; }
.co-page .tools input[type=range] { width: 100%; margin: 8px 0 18px; accent-color: var( --green ); }

.co-page .actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.co-page .actions .primary { grid-column: 1 / -1; background: var( --green ); color: white; }

.co-page .message {
	margin-top: 15px;
	padding: 13px;
	border-radius: 14px;
	background: var( --soft );
	border: 1px solid #d7e9ca;
	font-weight: 800;
}

.co-page .topbar { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; margin-bottom: 14px; }
.co-page .topbar label { font-weight: 900; }
.co-page .topbar select { padding: 10px 12px; border-radius: 12px; border: 1px solid #d5e3d7; background: #fff; min-width: 250px; }

.co-page .upload { padding: 10px 13px; border-radius: 12px; background: #edf4ee; cursor: pointer; }
.co-page .upload input { display: none; }

.co-page .canvas-wrap { border: 2px solid #d8e5da; border-radius: 18px; overflow: auto; background: #f5f7f5; touch-action: none; }
.co-page canvas { display: block; width: 100%; height: auto; background: #fff; touch-action: none; }
.co-page .privacy { font-size: .9rem; color: #65776b; }

@media ( max-width: 900px ) {
	.co-page .app { grid-template-columns: 1fr; }
	.co-page .tools { position: static; }
	.co-page .palette { grid-template-columns: repeat( 10, 1fr ); }
	.co-page .tool-buttons { grid-template-columns: repeat( 3, 1fr ); }
}

@media ( max-width: 560px ) {
	.co-page .palette { grid-template-columns: repeat( 5, 1fr ); }
	.co-page .tool-buttons { grid-template-columns: 1fr; }
	.co-page .topbar { align-items: stretch; }
	.co-page .topbar select,
	.co-page .upload { width: 100%; }
}

/* Printing gives you the picture and nothing else. The site header and
   footer go too, which Rick's standalone version had no need to hide. */
@media print {
	.site-header,
	.site-footer,
	.skip-link,
	.co-page .hero,
	.co-page .tools,
	.co-page .topbar,
	.co-page .privacy { display: none !important; }

	.co-page { background: none; }
	.co-page .app { display: block; margin: 0; padding: 0; }
	.co-page .board,
	.co-page .canvas-wrap { box-shadow: none; border: 0; padding: 0; }
	.co-page canvas { width: 100%; }
}

@media ( prefers-reduced-motion: reduce ) {
	.co-page button:hover,
	.co-page button:focus-visible { transform: none; }
}