/*
 * Grit Courts designer: Simple | Advanced mode overlay styles (see simple-mode.js).
 * Lives outside public/court-designer/ so an embed rsync --delete can't remove it.
 * Uses the designer's own tokens: --grit, --ink, --ink-soft, --line, --paper.
 */
.gcs-toggle {
	display: inline-flex;
	flex-shrink: 0;
	gap: 2px;
	padding: 2px;
	border-radius: 7px;
	background: var(--paper, #f3f4f1);
	border: 1px solid var(--line, #e3e5e0);
}
.gcs-toggle button {
	appearance: none;
	border: 0;
	background: transparent;
	color: var(--ink-soft, #5f665f);
	font-family: inherit;
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
	padding: 5px 10px;
	border-radius: 5px;
	cursor: pointer;
	transition: background-color 0.15s, color 0.15s;
}
.gcs-toggle button:hover { color: var(--ink, #1c211d); }
.gcs-toggle button[aria-pressed='true'] {
	background: var(--grit, #2f8f72);
	color: #fff;
	box-shadow: 0 1px 2px rgb(16 24 20 / 0.15);
}
.gcs-toggle button:focus-visible,
.gcs-panel button:focus-visible,
.gcs-hint button:focus-visible {
	outline: 2px solid var(--grit, #2f8f72);
	outline-offset: 2px;
}
/* Desktop side panel is narrow: the toggle takes the title's slot (the page already says Court designer). */
@media (min-width: 768px) {
	.gcs-hdr > span.flex-1 { display: none; }
	.gcs-hdr > .gcs-toggle { margin-right: auto; }
}

/* Mode switching */
/* The hint box stays available in Simple for tips that apply in both modes (the quote tip). */
html.gcs-simple .gcs-host > :not(.gcs-hdr):not(.gcs-panel):not(.gcs-hint) { display: none !important; }
html:not(.gcs-simple) .gcs-panel { display: none !important; }
html.gcs-simple .gcs-photo { display: none !important; }
html.gcs-simple .gcs-tpl { display: none !important; }

/* Simple → Full hint */
.gcs-hint {
	flex: none;
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 12px 8px;
	padding: 8px 8px 8px 12px;
	border-radius: 8px;
	background: color-mix(in srgb, var(--grit, #2f8f72) 10%, #fff);
	border: 1px solid color-mix(in srgb, var(--grit, #2f8f72) 28%, #fff);
	color: var(--ink, #1c211d);
	font-size: 12px;
	line-height: 1.35;
	animation: gcs-in 0.2s ease-out;
}
.gcs-hint[hidden] { display: none; }
.gcs-hint span { flex: 1; }
.gcs-hint button {
	appearance: none;
	border: 0;
	background: transparent;
	color: var(--ink-soft, #5f665f);
	font-size: 18px;
	line-height: 1;
	width: 28px;
	height: 28px;
	border-radius: 6px;
	cursor: pointer;
}
.gcs-hint button:hover { background: rgb(0 0 0 / 0.05); color: var(--ink, #1c211d); }
.gcs-hint .gcs-hint-act {
	width: auto;
	height: auto;
	padding: 5px 9px;
	border-radius: 6px;
	background: var(--grit, #2f8f72);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
}
.gcs-hint .gcs-hint-act:hover { background: color-mix(in srgb, var(--grit, #2f8f72) 85%, #000); color: #fff; }
.gcs-hint .gcs-hint-act[hidden] { display: none; }
@keyframes gcs-in { from { opacity: 0; transform: translateY(-4px); } }

/* Simple panel */
.gcs-panel {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: scroll; /* always show gutter so width doesn't jump */
	scrollbar-gutter: stable;
	overscroll-behavior: contain;
	padding: 4px 16px 24px;
	border-top: 1px solid var(--line, #e3e5e0);
	color: var(--ink, #1c211d);
}
@media (max-width: 767px) { .gcs-panel { padding-bottom: 88px; } }
.gcs-sec { padding: 14px 0 4px; }
.gcs-sec + .gcs-sec { border-top: 1px solid var(--line, #e3e5e0); }
.gcs-h {
	margin: 0 0 10px;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ink-soft, #5f665f);
}
.gcs-h-sub { text-transform: none; letter-spacing: 0; font-weight: 500; }
.gcs-panel button { appearance: none; font-family: inherit; cursor: pointer; }

/* "Start with" chooser: sports (icon cards) + looks (thumbnail cards), one radio group */
.gcs-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.gcs-choice {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 4px 4px 7px;
	border-radius: 10px;
	border: 1px solid var(--line, #e3e5e0);
	background: #fff;
	color: var(--ink, #1c211d);
	text-align: center;
	transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.gcs-choice:hover { border-color: color-mix(in srgb, var(--grit, #2f8f72) 50%, var(--line, #e3e5e0)); box-shadow: 0 2px 8px rgb(16 24 20 / 0.07); }
.gcs-choice:active { transform: scale(0.98); }
.gcs-choice-vis {
	display: grid;
	place-items: center;
	aspect-ratio: 2 / 1;
	border-radius: 7px;
	overflow: hidden;
	background: var(--paper, #f3f4f1);
}
.gcs-choice.is-look .gcs-choice-vis,
.gcs-choice.is-sport .gcs-choice-vis { background: #38603e; }
.gcs-choice-vis img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gcs-sport-thumb { display: block; width: 100%; height: 100%; object-fit: contain; }
.gcs-choice-name {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 2.5em;
	padding: 0 2px;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.25;
}
.gcs-choice.is-active {
	border-color: var(--grit, #2f8f72);
	box-shadow: 0 0 0 1px var(--grit, #2f8f72);
	background: color-mix(in srgb, var(--grit, #2f8f72) 6%, #fff);
}
.gcs-choice.is-active .gcs-choice-name { color: var(--grit, #2f8f72); }
.gcs-cap { margin: 14px 0 6px; font-size: 11px; font-weight: 600; color: var(--ink-soft, #5f665f); }
.gcs-note { margin: 10px 0 0; font-size: 11px; line-height: 1.4; color: var(--ink-soft, #5f665f); }

/* Basketball half / full */
.gcs-seg {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2px;
	padding: 3px;
	border-radius: 9px;
	background: var(--paper, #f3f4f1);
	border: 1px solid var(--line, #e3e5e0);
}
.gcs-seg button {
	border: 0;
	background: transparent;
	color: var(--ink-soft, #5f665f);
	font-size: 12px;
	font-weight: 600;
	padding: 9px 8px;
	border-radius: 6px;
}
.gcs-seg-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gcs-seg-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gcs-seg-4 button { padding-left: 2px; padding-right: 2px; font-size: 11px; }
.gcs-seg button[aria-pressed='true'] { background: var(--grit, #2f8f72); color: #fff; box-shadow: 0 1px 2px rgb(16 24 20 / 0.15); }

/* Color tiles */
.gcs-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.gcs-tile {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 8px;
	padding: 8px 8px 9px;
	text-align: left;
	border-radius: 10px;
	border: 1px solid var(--line, #e3e5e0);
	background: #fff;
	color: var(--ink, #1c211d);
	transition: border-color 0.15s, box-shadow 0.15s;
}
.gcs-tile:hover { border-color: color-mix(in srgb, var(--grit, #2f8f72) 50%, var(--line, #e3e5e0)); }
.gcs-tile.is-open { border-color: var(--grit, #2f8f72); box-shadow: 0 0 0 1px var(--grit, #2f8f72); }
.gcs-tile-chip {
	display: block;
	width: 100%;
	height: 40px;
	border-radius: 7px;
	background: var(--c);
	box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.12);
}
.gcs-tile-chip.is-none,
.gcs-chip.is-none {
	background: repeating-linear-gradient(135deg, #fff 0 5px, #eceee9 5px 10px);
}
.gcs-tile-text { display: flex; flex-direction: column; min-width: 0; padding: 0 2px; }
.gcs-tile-label { font-size: 12px; font-weight: 600; line-height: 1.25; }
.gcs-tile-val { font-size: 11px; line-height: 1.3; color: var(--ink-soft, #5f665f); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Swatch picker */
.gcs-picker {
	margin-top: 10px;
	padding: 12px;
	border-radius: 10px;
	border: 1px solid var(--line, #e3e5e0);
	background: var(--paper, #f7f8f5);
	animation: gcs-in 0.15s ease-out;
}
.gcs-tiles > .gcs-picker { grid-column: 1 / -1; margin-top: 0; }
.gcs-picker-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font-size: 12px; font-weight: 600; }
.gcs-picker-done {
	border: 0;
	background: transparent;
	color: var(--grit, #2f8f72);
	font-size: 12px;
	font-weight: 600;
	padding: 4px 6px;
	border-radius: 6px;
}
.gcs-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(36px, 1fr)); gap: 10px; }
.gcs-sw {
	width: 100%;
	aspect-ratio: 1;
	max-width: 44px;
	justify-self: center;
	border-radius: 50%;
	border: 0;
	background: var(--c);
	box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.14);
	transition: transform 0.12s, box-shadow 0.12s;
}
.gcs-sw:hover { transform: scale(1.08); }
/* Phantom: a ring of tinted line color on the court color underneath */
.gcs-sw.is-phantom { background: radial-gradient(circle, var(--b) 0 38%, var(--c) 40% 58%, var(--b) 60%); }
.gcs-sw.is-sel { box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.14), 0 0 0 2px #fff, 0 0 0 4px var(--grit, #2f8f72); }

.gcs-more { margin: 16px 0 4px; font-size: 11px; line-height: 1.45; color: var(--ink-soft, #5f665f); }
.gcs-link {
	border: 0;
	background: none;
	padding: 0;
	color: var(--grit, #2f8f72);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* "Also in this design": Advanced-only parts of the design, each with a step toward a simpler court */
.gcs-also {
	margin: 12px 0 4px;
	padding: 10px 12px 8px;
	border-radius: 10px;
	border: 1px solid var(--line, #e3e5e0);
	background: var(--paper, #f7f8f5);
	animation: gcs-in 0.15s ease-out;
}
.gcs-also-h {
	margin: 0 0 4px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ink-soft, #5f665f);
}
.gcs-also-list { list-style: none; margin: 0; padding: 0; }
.gcs-also-row {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	border-bottom: 1px solid var(--line, #e3e5e0);
}
.gcs-also-row:last-child { border-bottom: 0; }
/* The row itself (icon + label + chevron) opens that part in Advanced */
.gcs-also-open {
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 10px;
	align-self: stretch;
	margin: 0 -6px;
	padding: 6px;
	border: 0;
	border-radius: 7px;
	background: transparent;
	color: inherit;
	text-align: left;
	font: inherit;
}
button.gcs-also-open { cursor: pointer; }
button.gcs-also-open:hover { background: rgb(0 0 0 / 0.04); }
button.gcs-also-open:hover .gcs-also-go { transform: translateX(2px); stroke: var(--grit, #2f8f72); }
.gcs-also-go {
	flex: none;
	width: 16px;
	height: 16px;
	fill: none;
	stroke: var(--ink-soft, #5f665f);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform 0.12s, stroke 0.12s;
}
.gcs-also-row.is-removed .gcs-also-label,
.gcs-also-row.is-removed .gcs-also-icon { opacity: 0.55; }
.gcs-also-icon {
	flex: none;
	width: 20px;
	height: 20px;
	fill: none;
	stroke: var(--ink-soft, #5f665f);
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.gcs-also-label { flex: 1; min-width: 0; font-size: 13px; font-weight: 500; line-height: 1.3; color: var(--ink, #1c211d); }
.gcs-also-sub { display: block; font-size: 11px; font-weight: 400; color: var(--ink-soft, #5f665f); }
.gcs-also-btn {
	flex: none;
	border: 1px solid var(--line, #e3e5e0);
	border-radius: 7px;
	background: #fff;
	color: var(--ink, #1c211d);
	font-size: 12px;
	font-weight: 600;
	padding: 6px 10px;
	transition: border-color 0.12s, color 0.12s;
}
.gcs-also-btn:hover { border-color: #c2413a; color: #c2413a; }
/* Remove flips to Undo for UNDO_MS; the bar underneath runs down with it */
.gcs-also-btn.is-undo {
	position: relative;
	overflow: hidden;
	border-color: var(--grit, #2f8f72);
	color: var(--grit, #2f8f72);
}
.gcs-also-btn.is-undo:hover { background: color-mix(in srgb, var(--grit, #2f8f72) 8%, #fff); border-color: var(--grit, #2f8f72); color: var(--grit, #2f8f72); }
.gcs-also-btn.is-undo::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	height: 2px;
	width: 100%;
	background: var(--grit, #2f8f72);
	transform-origin: left;
	/* --d is minus the time already elapsed, so a panel re-render doesn't restart the countdown */
	animation: gcs-undo-run var(--t, 8s) linear var(--d, 0s) forwards;
}
@keyframes gcs-undo-run { to { transform: scaleX(0); } }
.gcs-also-foot { margin: 6px 0 0; font-size: 11px; line-height: 1.45; color: var(--ink-soft, #5f665f); }

/* Phones: bigger targets */
@media (max-width: 767px) {
	.gcs-toggle button { font-size: 12px; padding: 7px 12px; }
	.gcs-choice-name { font-size: 12px; }
	.gcs-seg-4 button { font-size: 12px; }
	.gcs-tile-chip { height: 48px; }
	.gcs-tile-label { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
	.gcs-hint, .gcs-picker, .gcs-also { animation: none; }
}

/* Keep the designer stage sized so the site footer is reachable by scrolling.
   Beats mobile-fixes.css #root { height: 100% !important }. */
body.designer-embed .designer-stage {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: min(calc(100dvh - var(--header-h, 72px)), 900px);
	min-height: 560px;
}
body.designer-embed .designer-root,
body.designer-embed #root {
	position: relative;
	flex: 1 1 0%;
	width: 100%;
	min-height: 0 !important;
	height: 0 !important;
	overflow: hidden;
}

/* Keep the mobile sheet inside the designer stage so the site footer is reachable. */
@media (max-width: 767px) and (orientation: portrait) {
	body.designer-embed .designer-controls-panel {
		position: absolute !important;
	}
}
@media (max-width: 767px) and (orientation: landscape) {
	body.designer-embed .designer-controls-panel {
		position: absolute !important;
		top: 0 !important;
		max-height: 100% !important;
	}
}