/* "Pick your spot" plan of pitch areas (JOB N). Tokens from style.css. */
.pys { padding-block: var(--section) calc(var(--section) * .6); background: var(--mist-2); }
.pys h2 { font-size: var(--step-4); margin-bottom: .35em; }
.pys__lead { max-width: var(--measure); color: var(--ink); }
.pys__tag { display: inline-block; margin: 0 0 1.25rem; padding: .35rem .8rem; border-radius: var(--pill); background: var(--sand-soft); color: var(--ink); font-size: var(--step--1); font-weight: 600; }
.pys__layout { display: grid; gap: var(--space-m); align-items: start; }
@media (min-width: 960px) {
	.pys__layout { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
	.pys__plan { position: sticky; top: 6rem; }
}
@media (min-width: 1920px) { .pys__layout { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); } }
.pys__plan { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(.5rem, 2vw, 1.25rem); min-width: 0; }
.pys-svg { width: 100%; height: auto; display: block; font-family: var(--sans); }
.pys-ground { fill: #e2ebe4; }
.pys-road { fill: none; stroke: #fbfcfb; stroke-width: 12; stroke-linecap: round; }
.pys-gate rect { fill: var(--sand); }
.pys-gate text { fill: var(--muted); font-size: 13px; font-weight: 600; }
.pys-area { cursor: pointer; outline: none; }
.pys-area__bg { stroke-width: 2; transition: stroke-width .15s, filter .15s; }
.pys-area--good .pys-area__bg { fill: #d1e6d8; stroke: #36695b; }
.pys-area--few .pys-area__bg { fill: #f3e4c1; stroke: #9a7426; }
.pys-area--full .pys-area__bg { fill: #e5e6e3; stroke: #858c89; stroke-dasharray: 6 4; }
.pys-area:hover .pys-area__bg, .pys-area.is-active .pys-area__bg { stroke-width: 4; filter: brightness(1.04); }
.pys-area:focus-visible .pys-area__bg { stroke: var(--ink); stroke-width: 5; }
.pys-area__num { fill: var(--ink); }
.pys-area.is-active .pys-area__num { fill: var(--marsh); }
.pys-area__n { fill: #fff; font-size: 15px; font-weight: 600; }
.pys-area__name { fill: var(--ink); font-size: 15px; font-weight: 600; }
.pys-area__icon { color: var(--sea); }
.pys-plot { fill: rgba(16, 48, 44, .3); }
.pys-plot--free { fill: #fff; stroke: rgba(16, 48, 44, .45); stroke-width: 1; }
@media (max-width: 559px) { .pys-area__name { display: none; } .pys-area__n { font-size: 17px; } }
.pys__key { list-style: none; margin: .75rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; font-size: var(--step--1); color: var(--muted); }
.pys__key li { display: flex; align-items: center; gap: .45rem; }
.pys-dot { display: inline-block; flex: none; width: .85rem; height: .85rem; border-radius: 50%; border: 2px solid; }
.pys-dot--good { background: #d1e6d8; border-color: #36695b; }
.pys-dot--few { background: #f3e4c1; border-color: #9a7426; }
.pys-dot--full { background: #e5e6e3; border-color: #858c89; border-style: dashed; }
.pys-plotkey { display: inline-block; width: 1.1rem; height: .7rem; border-radius: 2px; background: #fff; border: 1px solid rgba(16, 48, 44, .45); }

.pys__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; min-width: 0; }
.pys-card { background: var(--surface); border: 1px solid var(--line); border-left: 5px solid #36695b; border-radius: var(--radius); }
.pys-card--few { border-left-color: #9a7426; }
.pys-card--full { border-left-color: #858c89; }
.pys-card[open] { box-shadow: var(--shadow); }
.pys-card > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "num name chev" "num left chev" "num fee chev"; column-gap: .8rem; row-gap: .1rem; align-items: center; padding: .8rem 1rem; min-height: 44px; }
.pys-card > summary::-webkit-details-marker { display: none; }
.pys-card > summary::after { content: ""; grid-area: chev; width: .6rem; height: .6rem; border-right: 2px solid var(--marsh); border-bottom: 2px solid var(--marsh); transform: rotate(45deg); transition: transform .2s; margin-right: .3rem; }
.pys-card[open] > summary::after { transform: rotate(-135deg); }
.pys-card__num { grid-area: num; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--ink); color: #fff; font-weight: 600; }
.pys-card[open] .pys-card__num { background: var(--marsh); }
.pys-card__name { grid-area: name; font-family: var(--serif); font-size: var(--step-1); font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; }
.pys-card__left { grid-area: left; display: flex; align-items: center; gap: .4rem; font-weight: 600; font-size: var(--step--1); }
.pys-card__fee { grid-area: fee; color: var(--muted); font-size: var(--step--1); }
.pys-card__body { padding: 0 1rem 1rem; }
.pys-card__body > p:first-child { margin-top: .25rem; }
.pys-card__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: .5rem; margin: 0 0 1rem; }
.pys-card__facts div { background: var(--mist); border-radius: var(--radius); padding: .5rem .7rem; }
.pys-card__facts dt { font-size: var(--step--1); color: var(--muted); }
.pys-card__facts dd { margin: 0; font-weight: 600; }
.pys-card__go { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 .75rem; }
.pys-card__go .btn { flex: 1 1 12rem; min-height: 44px; justify-content: center; text-align: center; }
.pys-card__small { font-size: var(--step--1); color: var(--muted); margin: 0; }
.pys-homes { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.pys-homes li { border-bottom: 1px solid var(--line); }
.pys-homes a { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem .1rem; min-height: 44px; align-items: center; text-decoration: none; color: var(--ink); }
.pys-homes a:hover .pys-homes__t { text-decoration: underline; }
.pys-homes__t { min-width: 0; overflow-wrap: anywhere; }
.pys-homes__p { font-weight: 600; white-space: nowrap; }
.pys__small { margin-top: 1.25rem; max-width: var(--measure); color: var(--muted); }

/* Model page: "Choose your area" (cgl_pitches_choose_area) */
.pys-mini { margin: 1rem 0 0; padding: .9rem 1rem; background: var(--mist); border: 1px solid var(--line); border-radius: var(--radius); }
.pys-mini__t { margin: 0 0 .5rem; font-weight: 600; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; }
.pys-mini__tag { font-weight: 500; font-size: var(--step--1); padding: .15rem .6rem; border-radius: var(--pill); background: var(--sand-soft); }
.pys-mini__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.pys-mini__item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: .55rem; align-items: center; font-size: var(--step--1); }
.pys-mini__name { font-weight: 600; overflow-wrap: anywhere; }
.pys-mini__left { text-align: right; }
.pys-mini__fee { grid-column: 2 / -1; color: var(--muted); }
.pys-mini__go { margin: .6rem 0 0; }
.pys-mini__go a { display: inline-flex; align-items: center; min-height: 44px; }
@media (prefers-reduced-motion: reduce) { .pys-area__bg, .pys-card > summary::after { transition: none; } }