/* /planner — build your own set */
.pl-head{padding-top:clamp(40px,7vw,88px);padding-bottom:clamp(24px,4vw,40px)}
.pl-coord,.pl-route__code,.pl-stations__n{font:500 .8rem/1.4 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--teal)}
.pl-coord{margin:0 0 14px}
.pl-head h1{max-width:16ch}
.pl-lead{max-width:62ch;font-size:clamp(1.05rem,1.5vw,1.2rem);color:var(--muted)}
.pl-h2{font-size:clamp(1.5rem,2.8vw,2.2rem)}

/* ready routes */
.pl-routes{padding-bottom:clamp(48px,7vw,88px)}
.pl-routes__list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,24px)}
.pl-route img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.pl-route__body{display:flex;flex-direction:column;gap:10px;flex:1;padding:18px 18px 20px}
.pl-route__code{margin:0}
.pl-route h3{margin:0}
.pl-route h3 a{text-decoration:none}
.pl-route__contains{margin:0;padding-left:1.3em;font-size:.95rem;color:var(--muted)}
.pl-route__contains li{margin:2px 0}
.pl-route__contains li::marker{font-family:var(--font-mono);color:var(--gold)}
.pl-route__contains a{color:var(--muted)}
.pl-route__price{margin:auto 0 0;padding-top:10px;border-top:1px solid var(--line);font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.pl-route__price strong{font-size:1.3rem;font-weight:500;color:var(--gold)}
.pl-route__price span{color:var(--muted);font-size:.9rem}
.pl-route__buy{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px}

/* builder */
.pl-build{background:var(--bg-2);border-block:1px solid var(--line);padding-block:clamp(48px,7vw,96px)}
.pl-build__grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(28px,4vw,56px);align-items:start}
.pl-form{min-width:0}
.pl-shelf,.pl-pace{border:0;margin:0 0 26px;padding:0;min-width:0}
.pl-shelf legend,.pl-pace legend{display:flex;align-items:baseline;gap:10px;padding:0;margin-bottom:10px;font:600 1.2rem/1.2 var(--font-head)}
.pl-shelf__code{font:600 1.6rem/1 var(--font-head);color:var(--gold)}
.pl-pick{position:relative;display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;align-items:start;padding:12px 14px;margin-bottom:8px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);transition:border-color .2s}
.pl-pick:hover{border-color:var(--line-2)}
.pl-pick:has(input:checked){border-color:var(--gold)}
.pl-pick input{width:22px;height:22px;margin:3px 0 0;accent-color:var(--gold);cursor:pointer}
.pl-pick label{display:grid;gap:4px;cursor:pointer}
.pl-pick label::after{content:"";position:absolute;inset:0}
.pl-pick__name{font-weight:700}
.pl-pick__meta{font:400 .85rem var(--font-mono);font-variant-numeric:tabular-nums;color:var(--muted)}
.pl-pick__kit{display:flex;flex-wrap:wrap;gap:6px}
.pl-pace{display:flex;flex-wrap:wrap;gap:14px 24px}
.pl-pace legend{width:100%}
.pl-pace__row{display:grid;gap:6px}
.pl-pace label{font-weight:500;font-size:.95rem}
.pl-pace select{min-height:48px;min-width:140px;padding:10px 40px 10px 14px;background:var(--bg);color:var(--text);border:1px solid var(--line-2);border-radius:2px;
  appearance:none;-webkit-appearance:none;font:500 1rem var(--font-mono);
  background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat}
.pl-pace select:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
.js .pl-form.is-live .pl-update{display:none}

.pl-summary{min-width:0;position:sticky;top:calc(var(--hd-h) + 20px)}
.pl-summary__in{padding:24px;background:var(--panel);border:1px solid var(--line-2);border-radius:var(--r)}
.pl-totals{margin:0 0 14px}
.pl-totals > div{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line)}
.pl-totals dt{font:500 .8rem/1.6 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.pl-totals dd{margin:0;font-family:var(--font-mono);font-variant-numeric:tabular-nums;text-align:right}
.pl-totals__total{border-bottom:0!important;padding-top:14px!important}
.pl-totals__total dd{font-size:1.7rem;font-weight:500;color:var(--gold)}
.pl-empty{color:var(--muted);font-size:.95rem}
.pl-sug{margin:0 0 14px;padding:14px 16px;border:1px solid var(--line-2);border-left:3px solid var(--coral);border-radius:var(--r);background:var(--bg-2);font-size:.95rem}
.pl-sug p{margin:0 0 10px}
.pl-sug p:last-child{margin:0}
.pl-sug form{margin:0}
.pl-add{margin:6px 0 0}
.pl-add .btn{width:100%}

/* path timeline */
.pl-timeline{padding-block:clamp(48px,7vw,96px)}
.pl-tl-note{color:var(--muted);max-width:62ch}
.pl-path{position:relative;margin-top:28px;min-height:80px}
.pl-path__svg{position:absolute;left:0;right:0;top:0;width:100%;height:80px}
.pl-stations{position:relative;display:flex;list-style:none;margin:0;padding:0}
.pl-stations li{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:0 6px}
.pl-stations__dot{width:16px;height:16px;margin-top:32px;margin-bottom:12px;border-radius:50%;background:var(--bg);border:2px solid var(--gold);box-shadow:0 0 0 4px var(--bg)}
.pl-stations__name{font-size:.92rem;font-weight:500;line-height:1.3;overflow-wrap:anywhere}
.pl-stations__h{font:400 .82rem var(--font-mono);font-variant-numeric:tabular-nums;color:var(--gold)}
.pl-path__empty{position:relative;padding-top:96px;color:var(--muted);text-align:center}

@media (max-width:980px){
  .pl-routes__list{grid-template-columns:minmax(0,1fr)}
  .pl-route{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
  .pl-route img{height:100%;aspect-ratio:auto}
  .pl-build__grid{grid-template-columns:minmax(0,1fr)}
  .pl-summary{position:static}
}
@media (max-width:640px){
  .pl-route{display:flex}
  .pl-route img{aspect-ratio:16/9;height:auto}
  /* the path turns vertical: a gold rule on the left with the stations along it */
  .pl-path__svg{display:none}
  .pl-stations{flex-direction:column;border-left:2px solid var(--gold);margin-left:8px}
  .pl-stations li{flex:none;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:baseline;text-align:left;gap:2px 10px;padding:10px 0 10px 20px;position:relative}
  .pl-stations__dot{position:absolute;left:-9px;top:14px;margin:0}
  .pl-stations__n{grid-column:1 / -1}
  .pl-stations__name{grid-column:1}
  .pl-stations__h{grid-column:2}
  .pl-path__empty{padding-top:0;text-align:left}
}