/* Front-end plan builder. Browse left, plan builds right. All values from the
   design tokens so a token change propagates (rule 2.1). */

.ph-builder__head { background: var(--ph-color-surface); border-bottom: 1px solid var(--ph-color-line); padding: var(--ph-space-5) 0 var(--ph-space-4); }
.ph-builder__title { margin: 0 0 4px; font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); font-weight: 800; }
.ph-builder__sub { margin: 0; color: var(--ph-color-ink-soft); font-size: var(--ph-text-small); }
.ph-builder__from { margin-top: var(--ph-space-3); display: flex; align-items: center; gap: var(--ph-space-3); flex-wrap: wrap; background: color-mix(in srgb, var(--ph-color-primary) 8%, transparent); border: 1px solid color-mix(in srgb, var(--ph-color-primary) 30%, transparent); border-radius: var(--ph-radius-sm); padding: 10px 16px; font-size: var(--ph-text-small); }
.ph-builder__from img { width: 38px; height: 38px; border-radius: 8px; object-fit: cover; }
.ph-builder__from b { color: var(--ph-color-primary); }
.ph-builder__clear { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--ph-color-ink-soft); }

.ph-builder__body { display: grid; grid-template-columns: 1fr 355px; gap: var(--ph-space-5); padding: var(--ph-space-5) 0 var(--ph-space-8); align-items: start; }
.ph-builder__body > * { min-width: 0; }

.ph-builder__sec { margin: 0 0 var(--ph-space-3); font-size: 15px; font-weight: 800; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.ph-builder__sec--add { margin-top: var(--ph-space-6); }
.ph-builder__badge { font-size: 11px; font-weight: 800; background: var(--ph-color-ink); color: #fff; border-radius: var(--ph-radius-pill); padding: 3px 11px; }
.ph-builder__note { font-size: 12.5px; font-weight: 500; color: var(--ph-color-ink-soft); }

.ph-builder__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--ph-space-3); }
.ph-bcard { position: relative; display: grid; grid-template-columns: 84px 1fr; background: var(--ph-color-surface); border: 1px solid var(--ph-color-line); border-radius: var(--ph-radius-md); overflow: hidden; }
.ph-bcard:hover { border-color: var(--ph-color-primary); box-shadow: var(--ph-shadow-card); }
.ph-bcard.is-added { border-color: var(--ph-color-open); background: #fbfefc; }
.ph-bcard__img { width: 84px; height: 100%; min-height: 96px; object-fit: cover; }
.ph-bcard__in { padding: 11px 13px; min-width: 0; }
.ph-bcard__title { margin: 0 0 3px; font-size: 14px; font-weight: 800; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.ph-bcard__sub { font-size: 11.5px; color: var(--ph-color-ink-soft); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ph-bcard__add { margin-top: 9px; display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 12px; font-weight: 800; border-radius: var(--ph-radius-pill); padding: 6px 14px; border: 1.5px solid var(--ph-color-primary); background: #fff; color: var(--ph-color-primary); cursor: pointer; }
.ph-bcard__add:hover { background: var(--ph-color-primary); color: #fff; }
.ph-bcard.is-added .ph-bcard__add { border-color: var(--ph-color-open); background: color-mix(in srgb, var(--ph-color-open) 14%, transparent); color: var(--ph-color-open); cursor: default; }

.ph-builder__types { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: var(--ph-space-3); }
.ph-builder__type { border: 1.5px solid var(--ph-color-line); background: #fff; border-radius: var(--ph-radius-pill); padding: 8px 18px; font: inherit; font-size: 13px; font-weight: 700; color: var(--ph-color-ink-soft); cursor: pointer; }
.ph-builder__type.is-on { background: var(--ph-color-ink); border-color: var(--ph-color-ink); color: #fff; }
.ph-builder__chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: var(--ph-space-3); }
.ph-builder__chip { flex-shrink: 0; border: 1.5px solid var(--ph-color-line); background: #fff; border-radius: var(--ph-radius-pill); padding: 6px 15px; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--ph-color-ink-soft); cursor: pointer; }
.ph-builder__chip.is-on { border-color: var(--ph-color-primary); background: color-mix(in srgb, var(--ph-color-primary) 10%, transparent); color: var(--ph-color-primary); }
.ph-builder__search { margin-bottom: var(--ph-space-3); }
.ph-builder__search input { width: 100%; border: 1.5px solid var(--ph-color-line); border-radius: var(--ph-radius-pill); padding: 10px 18px; font: inherit; font-size: 14px; }
.ph-builder__search input:focus { border-color: var(--ph-color-primary); outline: none; }
.ph-builder__empty { color: var(--ph-color-ink-soft); font-size: var(--ph-text-small); }

.ph-builder__panel { position: sticky; top: var(--ph-space-4); background: var(--ph-color-surface); border: 1px solid var(--ph-color-line); border-radius: var(--ph-radius-md); overflow: hidden; }
.ph-builder__panel-top { background: var(--ph-color-ink); color: #fff; padding: 16px 18px; }
.ph-builder__panel-top h2 { margin: 0 0 2px; font-size: 15px; font-weight: 800; }
.ph-builder__panel-top p { margin: 0; font-size: 12px; color: #aab0c4; }
.ph-builder__stops { padding: 14px 16px 0; }
.ph-builder__slotempty { padding: 0 18px 14px; margin: 0; font-size: 12.5px; color: var(--ph-color-ink-soft); }

.ph-bslot { border: 1px solid var(--ph-color-line); border-radius: var(--ph-radius-sm); overflow: hidden; margin-bottom: 8px; }
.ph-bslot__head { display: flex; align-items: center; gap: 7px; padding: 8px 10px; background: var(--ph-color-bg); border-bottom: 1px solid var(--ph-color-line); flex-wrap: wrap; }
.ph-bslot__n { width: 22px; height: 22px; border-radius: 50%; background: var(--ph-color-primary); color: #fff; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ph-bslot__kind { flex: 1; min-width: 90px; border: 1px solid var(--ph-color-line); border-radius: 6px; padding: 4px 8px; font: inherit; font-size: 11.5px; }
.ph-bslot__time { width: 74px; border: 1px solid var(--ph-color-line); border-radius: 6px; padding: 4px 6px; font: inherit; font-size: 11px; font-weight: 800; color: var(--ph-color-primary); text-align: center; }
.ph-bslot__choice { font-size: 10.5px; font-weight: 700; color: var(--ph-color-primary); background: color-mix(in srgb, var(--ph-color-primary) 12%, transparent); border-radius: var(--ph-radius-pill); padding: 2px 9px; }
.ph-bslot__opt { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-bottom: 1px solid var(--ph-color-line); }
.ph-bslot__opt:last-of-type { border-bottom: 0; }
.ph-bslot__opt img, .ph-bslot__noimg { width: 34px; height: 34px; border-radius: 7px; object-fit: cover; background: var(--ph-color-bg); flex-shrink: 0; }
.ph-bslot__name { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ph-bslot__x { background: none; border: 0; color: #c3475a; font-size: 15px; cursor: pointer; padding: 2px 4px; }
.ph-bslot__alt { width: 100%; border: 0; border-top: 1px dashed var(--ph-color-line); background: #fbfbfd; padding: 8px 10px; font: inherit; font-size: 11.5px; font-weight: 700; color: var(--ph-color-ink-soft); cursor: pointer; text-align: left; }
.ph-bslot__alt:hover { color: var(--ph-color-primary); }
.ph-bslot__gap { display: flex; align-items: center; gap: 7px; padding: 6px 4px 10px 26px; flex-wrap: wrap; }
.ph-bslot__gap select, .ph-bslot__gap input { border: 1px solid var(--ph-color-line); border-radius: 6px; padding: 4px 8px; font: inherit; font-size: 11px; color: var(--ph-color-ink-soft); }
.ph-bslot__gap input { flex: 1; min-width: 90px; }

.ph-builder__sum { border-top: 1px solid var(--ph-color-line); padding: 14px 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ph-builder__sum-l { display: block; font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--ph-color-ink-soft); }
.ph-builder__sum-v { display: block; font-size: 14px; font-weight: 800; margin-top: 2px; }
.ph-builder__sum-v--pink { color: var(--ph-color-primary); font-size: 17px; }
.ph-builder__act { padding: 0 18px 16px; display: flex; flex-direction: column; gap: 8px; }
.ph-builder__lbl { font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--ph-color-ink-soft); }
.ph-builder__act input, .ph-builder__act textarea { border: 1.5px solid var(--ph-color-line); border-radius: var(--ph-radius-sm); padding: 9px 13px; font: inherit; font-size: 13px; resize: vertical; }
.ph-builder__act input:focus, .ph-builder__act textarea:focus { border-color: var(--ph-color-primary); outline: none; }
.ph-builder__msg { margin: 0; font-size: 12px; color: var(--ph-color-open); min-height: 1em; }
.ph-builder__msg.is-error { color: #b91c1c; }
.ph-builder__foot { margin: 0; padding: 0 18px 16px; font-size: 11px; color: var(--ph-color-ink-soft); }

.ph-builder__mbar { display: none; }
@media (max-width: 940px) {
  .ph-builder__body { grid-template-columns: 1fr; }
  .ph-builder__panel { position: static; display: none; }
  .ph-builder--panelopen .ph-builder__panel { display: block; }
  .ph-builder__mbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--ph-color-ink); color: #fff; padding: 12px 18px; align-items: center; gap: 12px; }
  .ph-builder__mbar span { font-size: 12px; color: #aab0c4; }
  .ph-builder__mbar b { font-size: 14px; color: #fff; }
  .ph-builder__mbar button { margin-left: auto; background: var(--ph-color-primary); border: 0; color: #fff; font: inherit; font-weight: 800; font-size: 13px; border-radius: var(--ph-radius-pill); padding: 10px 18px; cursor: pointer; }
}

/* ── v1.79.0 fixes ─────────────────────────────────────────────────────
   The panel heading sat on the ink header inheriting the ink body colour, so
   it was the same colour as its own background. Set explicitly. */
.ph-builder__panel-top h2,
.ph-builder__panel-top p { color: #fff; }
.ph-builder__panel-top p { color: #aab0c4; }

/* The browse column now sits on its own surface, so chips scrolling to the
   edge stop against a container rather than bleeding into the page. */
.ph-builder__mainpanel { background: var(--ph-color-surface); border: 1px solid var(--ph-color-line); border-radius: var(--ph-radius-md); padding: var(--ph-space-5); }
.ph-builder__mainpanel .ph-builder__chips { margin-left: 0; margin-right: 0; }
.ph-builder__filters { margin-bottom: var(--ph-space-3); }
.ph-builder__filters select { border: 1.5px solid var(--ph-color-line); border-radius: var(--ph-radius-pill); padding: 9px 16px; font: inherit; font-size: 13px; background: #fff; color: var(--ph-color-ink); max-width: 100%; }
.ph-builder__filters select:focus { border-color: var(--ph-color-primary); outline: none; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap; }

@media (max-width: 640px) { .ph-builder__mainpanel { padding: var(--ph-space-4); } }

/* Plan categories in the save panel. Same chip-checkbox pattern as the
   account editor, so the two surfaces read identically. */
.ph-builder__cats { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--ph-space-3); }
.ph-builder__cat { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; background: var(--ph-color-surface); border: 1px solid var(--ph-color-line); border-radius: var(--ph-radius-pill); padding: 4px 10px; cursor: pointer; }
.ph-builder__cat input { margin: 0; }
.ph-builder__cat:has(input:checked) { border-color: var(--ph-color-primary); color: var(--ph-color-primary); }

/* ── Guide mode ────────────────────────────────────────────────
   A guide is a flat roundup, so a pick has no number, no time and no travel
   leg. It carries what it is good for, why it made the list, and at most one
   star across the whole guide. Mirrors the CRM guide editor. */
.ph-builder__mode { display: inline-flex; border: 1px solid var(--ph-color-line); border-radius: var(--ph-radius-pill); overflow: hidden; margin-top: var(--ph-space-3); }
.ph-builder__modebtn { border: 0; background: var(--ph-color-surface); color: var(--ph-color-ink-soft); font-family: inherit; font-size: 13px; font-weight: 600; padding: 7px 18px; cursor: pointer; min-height: 40px; }
.ph-builder__modebtn.is-on { background: var(--ph-color-primary); color: #fff; }
.ph-builder__modehint { font-size: 12.5px; color: var(--ph-color-ink-soft); margin: var(--ph-space-2) 0 0; max-width: 60ch; }

.ph-bpick { border: 1px solid var(--ph-color-line); border-radius: var(--ph-radius-md); padding: var(--ph-space-3); margin-bottom: var(--ph-space-3); background: var(--ph-color-surface); }
.ph-bpick.is-starred { border-color: #e8c07a; background: #fdf8ef; }
.ph-bpick__head { display: flex; align-items: center; gap: 8px; margin-bottom: var(--ph-space-2); }
.ph-bpick__head img { width: 40px; height: 40px; border-radius: var(--ph-radius-sm); object-fit: cover; flex-shrink: 0; }
.ph-bpick__star { border: 1px solid var(--ph-color-line); background: #fff; color: var(--ph-color-ink-soft); border-radius: var(--ph-radius-pill); padding: 3px 9px; font-size: 13px; line-height: 1; cursor: pointer; min-height: 32px; }
.ph-bpick__star.is-on { border-color: #e8c07a; background: #fef6e7; color: #a8710f; }
.ph-bpick__field { width: 100%; font-family: inherit; font-size: 13px; padding: 7px 10px; border: 1px solid var(--ph-color-line); border-radius: var(--ph-radius-sm); margin-bottom: 6px; box-sizing: border-box; }