/* shared typography — matches the rest of the suite */
.pmf{font-family:"Lexend",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-weight:400;letter-spacing:-.05em}
.pmf *{font-family:inherit;letter-spacing:inherit;box-sizing:border-box}

.pmf{--pmf-accent:var(--ps-purple,#6F00FF);--pmf-bg:#fff;--pmf-ink:#1a1a1a;
  --pmf-muted:#6b6b6b;--pmf-rule:var(--ps-rule,#DEDEDE);--pmf-radius:10px;--pmf-pad:0px;
  --pmf-img-h:230px;
  --pmf-min-h:340px;
  --pmf-avatar:104px;
  color:var(--pmf-ink);display:block;padding:var(--pmf-pad)}

/* A fixed floor under the panels, so the page doesn't jump between the postcode
   form, the result and the spotlight — each is a different height on its own. */
.pmf-panel{min-height:var(--pmf-min-h);display:flex;flex-direction:column}
.pmf-panel > .pmf-stage{flex:1 1 auto}

/* tabs */
/* one pill split in two — the active half is the accent, the other black */

.pmf-panel[hidden]{display:none!important}

/* intro */
/* the stage holds the intro image until a result takes its place */
.pmf-stage{margin-bottom:20px}
.pmf-stage:empty{margin-bottom:0}
.pmf-image{height:var(--pmf-img-h);display:flex;align-items:center;justify-content:center}
.pmf-image img{max-width:100%;max-height:100%;width:auto;height:auto;
  object-fit:contain;display:block;border-radius:0;background:none}
.pmf.has-result .pmf-image{display:none}
.pmf-result:empty{display:none}
.pmf-heading{font-size:1.3rem;font-weight:700;line-height:1.25;margin-bottom:7px}
.pmf-blurb{font-size:.95rem;line-height:1.55;color:var(--pmf-muted);margin:0 0 18px}

/* the form */
.pmf-form{display:flex;flex-direction:column;gap:12px}
.pmf .pmf-input{width:100%;min-width:0;padding:15px 18px;border-radius:var(--pmf-radius);
  border:1px solid var(--pmf-rule);background:#fff;color:var(--pmf-ink);font:inherit;font-size:.95rem;
  appearance:none;margin:0;text-transform:uppercase}
.pmf .pmf-input::placeholder{color:var(--pmf-muted);opacity:.7;text-transform:none}
.pmf .pmf-input:focus{outline:none;border-color:var(--pmf-accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--pmf-accent) 16%,transparent)}
.pmf .pmf-go{width:100%;padding:15px 26px;border-radius:var(--pmf-radius);border:0;
  background:var(--pmf-accent)!important;color:#fff!important;font:inherit;font-size:.88rem;
  font-weight:700;cursor:pointer;appearance:none;margin:0;text-transform:none;box-shadow:none;
  font-size:.95rem;transition:background .15s}
.pmf .pmf-go:hover{background:var(--ps-black,#111)!important}
.pmf .pmf-go[disabled]{opacity:.6;cursor:default}

/* results */

.pmf-msg{padding:16px 18px;border-radius:var(--pmf-radius);background:#f7f6f9;
  font-size:.92rem;line-height:1.5}
.pmf-msg.is-error{background:#fdf3f3;color:#8a2b2c}
.pmf-msg.is-vacant{background:#fdf7ec;color:#7a5c1e}
.pmf-msg strong{font-weight:700}

.pmf .pmf-card{display:flex;align-items:center;gap:16px;text-decoration:none;color:var(--pmf-ink);
  background:var(--pmf-bg);border:1px solid var(--pmf-rule);border-radius:var(--pmf-radius);
  padding:16px;transition:border-color .14s}
.pmf .pmf-card:hover{border-color:var(--pmf-party,var(--pmf-accent))}
.pmf-card-photo{flex:0 0 auto;width:74px;height:74px;border-radius:50%;overflow:hidden;
  background:var(--pmf-party,#e8e8e8)}
.pmf-card-photo img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
.pmf-card-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.pmf-card-name{font-size:1.05rem;font-weight:700;line-height:1.3}
.pmf-card-party{font-size:.82rem;font-weight:600;color:var(--pmf-party,var(--pmf-muted))}
.pmf-card-seat{font-size:.82rem;color:var(--pmf-muted)}
.pmf-card-cta{margin-top:6px;font-size:.78rem;font-weight:700;color:var(--pmf-accent)}

.pmf-today-label{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  color:var(--pmf-muted);margin-bottom:10px}

@media(max-width:480px){
  .pmf-card-photo{width:58px;height:58px}
  .pmf-image{--pmf-img-h:140px}
}


/* ── Stacked card ──
   Photo on top, then name, seat and party, with the button on the foot. Used
   for the spotlight and the postcode result alike, so the two match. */
.pmf .pmf-card.is-stack{
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:0;
  padding:22px 20px 20px;
}
.pmf .pmf-card.is-stack .pmf-card-photo{
  width:var(--pmf-avatar);
  height:var(--pmf-avatar);
  margin-bottom:14px;
  background:var(--pmf-party,var(--pmf-muted));
  display:flex;align-items:center;justify-content:center;
}
.pmf-card-initials{
  color:#fff;
  font-weight:700;
  font-size:calc(var(--pmf-avatar) * .3);
  line-height:1;
  letter-spacing:.02em;
}
.pmf .pmf-card.is-stack .pmf-card-text{align-items:center;text-align:center;gap:3px}
.pmf .pmf-card.is-stack .pmf-card-name{font-size:1.1rem}
.pmf .pmf-card.is-stack .pmf-card-party{order:3}
.pmf .pmf-card.is-stack .pmf-card-seat{order:2}

.pmf-card-btn{
  display:block;
  width:100%;
  margin-top:16px;
  padding:12px 20px;
  border-radius:var(--ps-pill,99px);
  background:var(--pmf-party,var(--pmf-accent));
  color:#fff;
  font-size:.84rem;
  font-weight:700;
  line-height:1.3;
  transition:background .15s ease;
}
.pmf .pmf-card.is-stack:hover .pmf-card-btn{background:var(--ps-black,#111111)}

@media(max-width:480px){
  .pmf{--pmf-avatar:84px;--pmf-min-h:300px}
}


/* ── Waiting for a postcode ──
   The same card as a result, so the swap is like for like: nothing moves, only
   the contents change. Not a link, so it takes no hover or pointer. */
.pmf .pmf-prompt{
  cursor:default;
  --pmf-party:var(--pmf-accent);
}
.pmf .pmf-prompt:hover{border-color:var(--pmf-rule)}
.pmf-prompt[hidden]{display:none}
.pmf-prompt-mark{font-size:calc(var(--pmf-avatar) * .42)}
.pmf-prompt-note{font-size:.76rem;font-style:italic;opacity:.75}
.pmf.has-result .pmf-prompt{display:none}


/* ── One card, two states ──
   Opens on the spotlight MP and becomes the visitor's own. The label above takes
   the party's colour, which is the only thing that moves between the two. */
.pmf-featured{margin-bottom:18px}
.pmf-featured-label{
  text-align:center;
  font-size:.72rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.09em;
  color:var(--pmf-party,var(--pmf-accent));
  margin-bottom:10px;
  transition:color .2s ease;
}
.pmf-find-label{
  text-align:center;
  font-size:.72rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.09em;
  color:var(--pmf-muted);
  margin-bottom:10px;
}
.pmf-featured .pmf-result{margin:0}
.pmf-featured .pmf-result:empty{display:none}


/* ── Swapping one MP for another ──
   The card fades rather than disappearing, and the space it occupies is held at
   its current height until the replacement is in, so nothing jumps. */
.pmf-result{transition:opacity .16s ease}
.pmf-result.is-loading{opacity:.55}
.pmf-result.is-swapping{opacity:0}



/* ── The tip over the postcode box ──
   Floated above the field so it never takes space, which is the whole point —
   the card on screen stays put whatever goes wrong. */
.pmf-form{position:relative}
.pmf-notice{
  position:absolute;
  left:0;right:0;bottom:calc(100% + 10px);
  z-index:5;
  padding:10px 14px;
  border-radius:var(--pmf-radius);
  background:var(--ps-black,#111111);
  color:#fff;
  font-size:.82rem;
  line-height:1.4;
  text-align:center;
  box-shadow:0 6px 20px rgba(0,0,0,.16);
  animation:pmf-tip .16s ease;
}
.pmf-notice[hidden]{display:none}
.pmf-notice::after{
  content:"";
  position:absolute;top:100%;left:50%;transform:translateX(-50%);
  border:7px solid transparent;
  border-top-color:var(--ps-black,#111111);
}
.pmf-notice.is-error{background:var(--ps-danger,#b32d2e)}
.pmf-notice.is-error::after{border-top-color:var(--ps-danger,#b32d2e)}
.pmf-notice.is-vacant{background:#7a5c1e}
.pmf-notice.is-vacant::after{border-top-color:#7a5c1e}
.pmf-notice strong{font-weight:700}

@keyframes pmf-tip{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}