/* Construct Match — Project Picker */
.cm.plan { z-index: 4; background: var(--paper); border-bottom: 1px solid var(--line); }
/* Question + button on top, tiles full width below: one row left the tiles ~138px, too narrow for their labels */
.cm .plan__in { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "q go" "list list"; align-items: center; gap: 22px 28px; padding-top: 30px; padding-bottom: 30px; }
.cm .plan__go { grid-area: go; }
.cm .plan__q { grid-area: q; font: 650 22px/1.15 var(--cm-display); font-stretch: 110%; letter-spacing: -.01em; color: var(--ink); }
.cm .plan__q small { display: block; margin-top: 6px; font: 400 13px/1 var(--mono); letter-spacing: 0; color: var(--muted); }
.cm .plan__list { grid-area: list; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 10px; }
.cm .pick { position: relative; display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 38px 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; text-align: left; font: 600 15.5px/1.25 var(--body); color: var(--ink); text-transform: none; letter-spacing: 0; white-space: normal; cursor: pointer; transition: border-color .2s, background-color .2s, color .2s, transform .2s var(--ease); }
.cm .pick svg { flex: none; width: 36px; height: 36px; color: var(--navy); stroke-width: 1.5; }
.cm .pick:hover, .cm .pick:focus { border-color: var(--navy); background: #fff; color: var(--ink); transform: translateY(-1px); }
.cm .pick::after { content: ""; position: absolute; right: 12px; top: 12px; width: 16px; height: 16px; border: 1.5px solid var(--silver); border-radius: 4px; transition: background-color .2s, border-color .2s; }
.cm .pick[aria-pressed="true"], .cm .pick[aria-pressed="true"]:hover { border-color: var(--navy); background: var(--navy); color: #fff; }
.cm .pick[aria-pressed="true"] svg { color: #fff; }
.cm .pick[aria-pressed="true"]::after { border-color: #fff; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310306F' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center / 12px no-repeat; }

@media (max-width: 900px) {
	.cm .plan__list { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
	.cm .plan__in { grid-template-columns: 1fr; grid-template-areas: "q" "list" "go"; gap: 18px; }
	.cm .pick { min-height: 58px; font-size: 14px; }
	.cm .pick svg { width: 30px; height: 30px; }
	.cm .plan__go { width: 100%; }
}