/* =============================================================================
   HERITAGE — trip planner
   Same idiom as the rest: black / white / one signal orange, square corners,
   heavy uppercase gothic. Builder column on the left, map on the right, the
   same split the Discover page already teaches.
   ========================================================================== */
.pln{display:grid;grid-template-columns:390px minmax(0,1fr);
  height:calc(100vh - 106px);min-height:520px}
@media(max-width:900px){
  .pln{grid-template-columns:1fr;height:auto}
  .pln-map{height:52vh;min-height:320px;order:-1}
}

.pln-side{border-right:1px solid var(--rule);display:flex;flex-direction:column;
  min-width:0;min-height:0;overflow:auto;background:var(--white)}
.pln-map{position:relative;min-width:0;min-height:0;background:var(--black)}
.pln-map #pmap{position:absolute;inset:0}

.pbar{padding:15px 17px;border-bottom:1px solid var(--rule);background:var(--stone)}
.pbar h1{margin:0 0 3px;font-size:16px;font-weight:900;letter-spacing:-.01em;
  text-transform:uppercase;color:var(--black)}
.pbar p{margin:0;font-size:11.5px;line-height:1.45;color:var(--steel)}

.psearch-wrap{position:relative;padding:14px 17px 0}
.psearch-wrap input{width:100%;border:1px solid var(--ink);padding:11px 12px;
  font:inherit;font-size:14px;background:var(--white);color:var(--ink)}
.psearch-wrap input::placeholder{color:var(--smoke)}
#presults{position:absolute;left:17px;right:17px;top:100%;z-index:9;background:var(--white);
  border:1px solid var(--ink);border-top:0;max-height:310px;overflow:auto;
  box-shadow:0 12px 28px rgba(0,0,0,.18)}
.pres{display:block;width:100%;text-align:left;border:0;border-bottom:1px solid var(--rule);
  background:var(--white);padding:10px 12px;cursor:pointer;font:inherit}
.pres:hover{background:var(--stone)}
.pres:last-child{border-bottom:0}
.pres b{display:block;font-size:13.5px;font-weight:700;letter-spacing:-.005em;line-height:1.25}
.pres span{display:block;font-size:11px;color:var(--steel);margin-top:2px}
.pres--place{background:var(--stone)}

.plist{list-style:none;margin:0;padding:14px 17px 0;display:flex;flex-direction:column;gap:8px}
.pempty{margin:16px 17px;font-size:12.5px;line-height:1.55;color:var(--steel)}
.pstop{display:grid;grid-template-columns:26px 1fr auto;gap:10px;align-items:center;
  border:1px solid var(--rule);padding:9px 10px;background:var(--white)}
.pno{width:26px;height:26px;background:var(--black);color:var(--white);display:grid;
  place-items:center;font-size:12px;font-weight:800}
.pname{min-width:0}
.pname b{display:block;font-size:13px;font-weight:700;line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pname span{display:block;font-size:10.5px;color:var(--steel);margin-top:2px}
.pacts{display:flex;gap:3px}
.pacts button{width:26px;height:26px;border:1px solid var(--rule);background:var(--white);
  cursor:pointer;font-size:13px;line-height:1;color:var(--ink)}
.pacts button:hover:not([disabled]){background:var(--black);color:var(--white);
  border-color:var(--black)}
.pacts button[disabled]{opacity:.32;cursor:default}

.popts{display:flex;gap:16px;flex-wrap:wrap;align-items:center;padding:14px 17px 0;
  font-size:11.5px;color:var(--steel)}
.popts label{display:flex;gap:6px;align-items:center;cursor:pointer}
.popts input[type=number]{width:62px;border:1px solid var(--rule);padding:5px 6px;
  font:inherit;font-size:12px}
.popts accent-color{accent-color:var(--orange)}
.popts input[type=checkbox]{accent-color:var(--orange);width:15px;height:15px}

#pout{padding:16px 17px 0}
.psum{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule);
  border:1px solid var(--rule)}
.psum div{background:var(--white);padding:11px 9px;text-align:center}
.psum b{display:block;font-size:17px;font-weight:900;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;line-height:1.05;white-space:nowrap}
@media(min-width:1200px){.psum b{font-size:19px}}
.psum span{display:block;font-size:8.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--steel);margin-top:4px}
.pdays{list-style:none;margin:12px 0 0;padding:0;border:1px solid var(--rule)}
.pdays li{display:flex;justify-content:space-between;gap:10px;padding:9px 12px;
  border-bottom:1px solid var(--rule);font-size:12.5px}
.pdays li:last-child{border-bottom:0}
.pdays b{font-weight:800}
.pdays span{color:var(--steel);font-variant-numeric:tabular-nums}
.pnote{margin:11px 0 0;font-size:11px;line-height:1.5;color:var(--steel)}

.pexp{display:flex;gap:8px;flex-wrap:wrap;padding:16px 17px 20px;margin-top:auto}
.pexp button{border:1px solid var(--ink);background:var(--white);color:var(--ink);
  font:inherit;font-size:10.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
  padding:11px 13px;cursor:pointer}
.pexp button:hover:not([disabled]){background:var(--ink);color:var(--white)}
.pexp button.primary{background:var(--orange);border-color:var(--orange);color:#fff}
.pexp button.primary:hover:not([disabled]){background:var(--orange-dk);
  border-color:var(--orange-dk)}
.pexp button[disabled]{opacity:.4;cursor:default}
#pstatus{padding:0 17px;font-size:11.5px;color:var(--orange);font-weight:600;min-height:17px}

/* ---------------------- lodging at each overnight stop --------------------
   Scoped to where a day actually ends, not the whole route: a rider wants a bed
   where they will stop, not a list of every hotel across 800 miles. */
.pdays li{flex-direction:column;align-items:stretch;gap:3px}
.pdays li>b{font-weight:800}
.pdays li>span{color:var(--steel);font-variant-numeric:tabular-nums}
.pbeds:empty{display:none}
.pbeds{margin:8px 0 2px;border-top:1px solid var(--rule);padding-top:8px}
.pbeds>b{display:block;font-size:9.5px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--orange);margin:0 0 6px}
.pbeds>i{display:block;font-style:normal;font-size:11.5px;color:var(--steel);
  line-height:1.5}
.pbeds ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.pbeds li{display:flex;justify-content:space-between;gap:10px;font-size:12px;
  border:0;padding:0}
.pbeds li span{font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.pbeds li i{font-style:normal;color:var(--steel);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.phw-warn{display:block;margin:9px 17px 0;font-style:normal;font-size:11px;
  line-height:1.45;color:var(--orange);font-weight:600}
.phw-warn:empty{display:none}
.popts label:has(input:disabled){opacity:.5}

/* --------------------------- routing style dial --------------------------
   Direct / Curvy / Supercurvy instead of one checkbox. "Avoid interstates" was
   a yes/no answer to a question that has degrees. */
.pstyle{display:flex;gap:6px;padding:14px 17px 0;flex-wrap:wrap}
.pstyle .tbtn{flex:1 1 auto;min-width:0;border:1px solid var(--ink);background:var(--white);
  color:var(--ink);font:inherit;font-size:10px;font-weight:800;letter-spacing:.04em;
  text-transform:uppercase;padding:9px 6px;cursor:pointer;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.pstyle .tbtn:hover{background:var(--stone)}
.pstyle .tbtn[aria-pressed="true"]{background:var(--orange);border-color:var(--orange);
  color:#fff}
.pstyle .tbtn--alt{flex:0 0 auto;min-width:0;border-color:var(--rule);color:var(--steel)}
.pstyle .tbtn--alt:hover{background:var(--ink);color:var(--white);border-color:var(--ink)}
.phint{margin:7px 0 0;font-size:11px;color:var(--steel)}

/* ------------------------------ drag to reorder --------------------------- */
.pstop{cursor:default}
.pgrip{color:var(--rule);font-size:13px;letter-spacing:-2px;cursor:grab;
  padding:0 2px;user-select:none}
.pgrip:active{cursor:grabbing}
.pstop.dragging{opacity:.45}
.pstop.over{box-shadow:inset 0 3px 0 var(--orange)}
.pstop{grid-template-columns:26px 1fr auto auto}