/* Client planner. Colours, buttons and option cards come from ../styles.css. */
.planner .tag{opacity:.75;font-size:.9rem}
.intro{padding:6px 0 18px;max-width:720px}
.intro h1{font-family:var(--display);font-weight:700;font-size:clamp(2rem,6vw,2.8rem);line-height:1.05;letter-spacing:.01em;text-transform:uppercase;margin:0 0 8px}
.intro p{margin:0;color:var(--muted);font-size:1.02rem}
.pgrid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:18px;align-items:start}
.pgrid .col{display:flex;flex-direction:column;gap:18px;min-width:0}
.side{position:sticky;top:76px}
.chooser.four{grid-template-columns:repeat(4,1fr)}
.planbox{border:1px solid var(--line);border-radius:6px;background:var(--panel);padding:6px;user-select:none;-webkit-user-select:none}
.planbox svg{width:100%;height:auto;display:block;overflow:visible;touch-action:none}
.planbox .pi{cursor:grab;outline:none}
.planbox .pi:focus-visible rect[fill="transparent"]{stroke:var(--accent);stroke-width:3;stroke-dasharray:6 4}
.planbox .pi.dragging{cursor:grabbing}
.seltool{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-height:38px}
.seltool b{font-weight:600}
.warn{color:var(--warn);background:var(--warn-soft);border-radius:4px;padding:6px 10px;margin:0;font-size:.9rem}
.warn:empty{display:none}
.palette{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px}
.pal{font:inherit;text-align:left;display:flex;flex-direction:column;gap:1px;padding:8px 10px;border:1px solid var(--line);border-radius:6px;background:var(--field);color:var(--fg);cursor:pointer;min-height:56px}
.pal b{font-weight:600}
.pal span{color:var(--muted);font-size:.8rem}
.pal .n{font-family:var(--mono);color:var(--accent);font-size:.8rem}
.pal:disabled{opacity:.45;cursor:not-allowed}
.pal:hover:not(:disabled){border-color:var(--accent)}
.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.formgrid .wide{grid-column:1/-1}
textarea{font:inherit;background:var(--field);color:var(--fg);border:1px solid var(--line);border-radius:4px;padding:7px 9px;resize:vertical}
textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.err{color:var(--bad);margin:8px 0 0;font-weight:600}
.err:empty{display:none}
.pricecard .range span{white-space:nowrap}
a.btn{text-decoration:none;justify-content:center}
.btn.big{padding:12px 20px;font-size:1.05rem}
.pricecard .range{font-family:var(--mono);font-size:1.2rem;line-height:1.35;font-weight:500;color:var(--accent);margin:0;font-variant-numeric:tabular-nums}
.pricecard .std{margin:0;font-size:.92rem}
.chosen{margin:0;padding-left:18px;font-size:.92rem}
.chosen:empty::before{content:"Nothing extra yet";color:var(--muted);margin-left:-18px}
.sent{display:flex;flex-direction:column;gap:10px}
.sent h3{font-family:var(--display);font-size:1.6rem;text-transform:uppercase;margin:0}
.sent .ref{font-family:var(--mono);font-size:1.1rem}
.btn.wa{background:#1f7a4d;border-color:#1f7a4d;color:#fff}
@media (max-width:900px){
  .pgrid{grid-template-columns:1fr}
  .side{position:static}
  body.planner .mobilebar{display:flex}
}
@media (max-width:600px){
  .planbox svg{height:min(68vh,620px);width:auto;max-width:100%;margin:0 auto}
}
@media (max-width:560px){
  .chooser.four{grid-template-columns:1fr 1fr}
  .formgrid{grid-template-columns:1fr}
  .planbox{padding:2px}
}