/* The bar is relocated by JS into .plp-container so that position:sticky has a
   tall containing block. Tokens therefore live on every root we render into. */
.plj-root,.plj-bar,.plj-empty,.plv-pgn-wrap{
  --plj-accent:#1F3A5F;
  --plj-accent-hover:#162B47;
  --plj-fg:#212121;
  --plj-muted:#838383;
  /* anything that has to be READ on white takes this one: #838383 is 3.9:1 */
  --plj-mut-aa:#6F6F6F;
  --plj-head:#8a8a8a;
  --plj-chip-ink:#414141;
  --plj-border:#e0e0e0;
  --plj-border-soft:#eeeeee;
  --plj-faint:#acacac;
  --plj-tint:#F4F7FB;
  --plj-accent-50:#EEF2F7;
  --plj-accent-20:#cfdae7;
  --plj-bg:#ffffff;
  --plj-subtle:#f9f9f9;
  --plj-ease-out:cubic-bezier(0.23,1,0.32,1);
  --plj-ease:cubic-bezier(0.2,0.6,0.2,1);
  font-family:"Manrope","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  color:var(--plj-fg);
  display:block;
}
.plj-sentinel{height:1px;margin:0;padding:0}

/* The site header is position:fixed, so this first section started flush under
   it — the h2 sat 6px below the header edge. Push the section down by the real
   header height (JS writes --plj-header; 90px desktop / 84px mobile fallback)
   plus a breathing gap. Scoped to this page: the embed only lives on /projects. */
.plp-featured{padding-top:calc(var(--plj-header, 90px) + 56px) !important}
@media (max-width:767px){
  .plp-featured{padding-top:calc(var(--plj-header, 84px) + 28px) !important}
}

/* ── bar: the search card and the results row ───────────────────────────
   One component with Properties All (2026-09-16, client: the search bars must
   read the same on every page that has one). The CARD holds what narrows the
   list — search, stage, city — and the ROW under it reports the result and
   orders it: count on the left, Sort as a bordered pill, Clear only while
   something is filtered. Values are the listing rail's, value for value.
   Controls inside the card are borderless on desktop (the card is their
   edge); outside it, and once the card stacks, they carry a border. */
.plj-bar{
  position:sticky;
  top:0;
  z-index:60;
  /* 16px card -> row, 24px row -> first card: the listing's rhythm */
  margin:0 0 8px;
  padding:12px 0 16px;
  background:var(--plj-bg);
  border-bottom:1px solid transparent;
  transition:border-color 200ms var(--plj-ease), box-shadow 200ms var(--plj-ease);
}
.plj-bar[data-stuck="true"]{
  border-bottom-color:var(--plj-border-soft);
  box-shadow:0 6px 20px rgba(0,0,0,.05);
}
.plj-bar__card{
  display:flex;
  align-items:center;
  gap:8px;
  padding:12px;
  background:var(--plj-bg);
  border:1px solid var(--plj-border-soft);
  border-radius:20px;
  transition:border-color 200ms var(--plj-ease-out), box-shadow 200ms var(--plj-ease-out);
}
.plj-bar__card:focus-within{border-color:#cfcfcf;box-shadow:0 6px 24px rgba(16,24,40,.06)}
.plj-bar__row{display:flex;align-items:center;gap:8px;margin-top:16px;min-width:0}

/* Search sits first because it is the fastest way through 40 projects. It
   takes every pixel the other controls do not need. */
.plj-search{position:relative;display:flex;align-items:center;flex:1 1 auto;min-width:180px;margin-right:16px}
.plj-search__ic{position:absolute;left:16px;width:16px;height:16px;pointer-events:none;
  color:var(--plj-muted);transition:color 200ms var(--plj-ease)}
.plj-search__in{
  width:100%;height:44px;box-sizing:border-box;margin:0;
  padding:0 40px 0 42px;border-radius:999px;
  border:1px solid var(--plj-border-soft);background:var(--plj-subtle);
  color:var(--plj-fg);
  /* longhands on purpose: "font:500 16px/1 inherit" is invalid (inherit cannot
     fill the family slot) and the whole declaration used to be dropped */
  font-family:inherit;font-size:16px;font-weight:500;line-height:1.2;letter-spacing:-.01em;
  outline:none;-webkit-appearance:none;appearance:none;
  transition:border-color 160ms var(--plj-ease-out),background-color 160ms var(--plj-ease-out)}
.plj-search__in::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.plj-search__in::placeholder{color:var(--plj-faint);font-weight:500}
.plj-search__in:focus,
.plj-search[data-on="true"] .plj-search__in{background:var(--plj-bg);border-color:var(--plj-border)}
.plj-search:focus-within .plj-search__ic,
.plj-search[data-on="true"] .plj-search__ic{color:var(--plj-accent)}
.plj-search__x{
  position:absolute;right:10px;width:24px;height:24px;display:none;
  align-items:center;justify-content:center;padding:0;border:0;border-radius:999px;
  background:none;color:var(--plj-muted);cursor:pointer;
  transition:color 200ms var(--plj-ease),transform 140ms var(--plj-ease-out)}
.plj-search[data-on="true"] .plj-search__x{display:inline-flex}
.plj-search__x:active{transform:scale(.9)}
.plj-search__x svg{width:12px;height:12px}

/* ── stage: segmented control, sized to the pills beside it ─────────────── */
.plj-seg{
  position:relative;
  display:inline-flex;
  align-items:center;
  flex:0 0 auto;
  gap:2px;
  height:44px;
  box-sizing:border-box;
  padding:3px;
  border-radius:999px;
  background:var(--plj-subtle);
  border:1px solid var(--plj-border-soft);
}
.plj-seg__ind{
  position:absolute;
  top:3px;
  left:0;
  height:calc(100% - 6px);
  border-radius:999px;
  background:var(--plj-accent);
  transform:translateX(0);
  width:0;
  opacity:0;
  pointer-events:none;
  transition:transform 260ms var(--plj-ease-out), width 260ms var(--plj-ease-out), opacity 160ms var(--plj-ease-out);
  will-change:transform,width;
}
.plj-seg__btn{
  position:relative;
  z-index:1;
  appearance:none;
  border:0;
  background:transparent;
  cursor:pointer;
  font-family:inherit;
  font-size:14px;
  font-weight:500;
  line-height:1;
  color:var(--plj-mut-aa);
  height:100%;
  padding:0 14px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  gap:7px;
  white-space:nowrap;
  transition:color 200ms var(--plj-ease), transform 140ms var(--plj-ease-out);
}
.plj-seg__btn[aria-selected="true"]{color:#fff;font-weight:600}
.plj-seg__btn:active{transform:scale(0.97)}
.plj-seg__btn:disabled{opacity:.35;cursor:default}
.plj-seg__n{
  font-size:12px;
  font-weight:600;
  font-variant-numeric:tabular-nums;
  opacity:.65;
}

/* ── dropdown triggers — the listing's pill, caret drawn with borders ───── */
.plj-dd{position:relative;flex:0 0 auto;min-width:0}
.plj-dd__btn{
  appearance:none;
  cursor:pointer;
  font-family:inherit;
  font-size:14px;
  font-weight:500;
  line-height:1;
  display:inline-flex;
  align-items:center;
  gap:0;
  height:44px;
  box-sizing:border-box;
  padding:0 15px;
  border-radius:999px;
  border:1px solid transparent;
  background:transparent;
  color:var(--plj-mut-aa);
  white-space:nowrap;
  max-width:100%;
  -webkit-tap-highlight-color:transparent;
  transition:border-color 160ms var(--plj-ease-out), background-color 160ms var(--plj-ease-out), transform 140ms var(--plj-ease-out);
}
.plj-dd__btn:active{transform:scale(0.97)}
.plj-dd__ic{width:18px;height:18px;flex:0 0 18px;margin-right:9px;opacity:.7}
.plj-dd__lab{flex:none}
.plj-dd__val{font-weight:600;color:var(--plj-accent);overflow:hidden;text-overflow:ellipsis;min-width:0}
.plj-dd__val::before{content:':\00a0';font-weight:500;color:var(--plj-mut-aa)}
/* the city pill names the filter until something is picked, like the listing */
.plj-dd--city .plj-dd__btn:not([data-on="true"]) .plj-dd__val{display:none}
.plj-dd__chev{display:none}
.plj-dd__btn::after{
  content:'';width:7px;height:7px;flex:0 0 7px;margin-left:10px;
  border-right:1.6px solid var(--plj-mut-aa);border-bottom:1.6px solid var(--plj-mut-aa);
  transform:translateY(-2px) rotate(45deg);
  transition:transform 200ms var(--plj-ease-out), border-color 200ms var(--plj-ease-out);
}
.plj-dd__btn[aria-expanded="true"]{background:var(--plj-tint);border-color:var(--plj-border)}
.plj-dd__btn[aria-expanded="true"]::after{transform:translateY(1px) rotate(225deg);border-color:var(--plj-accent)}
.plj-dd__btn[data-on="true"]{background:var(--plj-accent-50);color:var(--plj-accent)}
.plj-dd__btn[data-on="true"] .plj-dd__ic{opacity:1}
.plj-dd__btn[data-on="true"]::after{border-color:var(--plj-accent)}

/* Sort lives outside the card, so it carries its own border. Ordering is not
   a filter: it never takes the "chosen" fill. */
.plj-dd--sort .plj-dd__btn,
.plj-dd--sort .plj-dd__btn[data-on="true"]{background:var(--plj-bg);border-color:var(--plj-border);padding:0 16px;color:var(--plj-mut-aa)}
.plj-dd--sort .plj-dd__btn[aria-expanded="true"]{border-color:var(--plj-accent)}

/* ── menus: the same card every filter panel on the site uses ──────────── */
.plj-menu{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  min-width:232px;
  max-width:min(380px, calc(100vw - 32px));
  box-sizing:border-box;
  padding:10px;
  border-radius:16px;
  background:var(--plj-bg);
  border:1px solid var(--plj-border-soft);
  box-shadow:0 10px 24px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04);
  transform-origin:top right;
  opacity:0;
  visibility:hidden;
  transform:translateY(-4px);
  pointer-events:none;
  z-index:70;
  transition:opacity 130ms var(--plj-ease), transform 130ms var(--plj-ease), visibility 0s linear 130ms;
}
.plj-menu--left{right:auto;left:0;transform-origin:top left}
.plj-menu[data-open="true"]{
  opacity:1;
  visibility:visible;
  transform:none;
  pointer-events:auto;
  transition:opacity 180ms var(--plj-ease-out), transform 180ms var(--plj-ease-out);
}
.plj-menu__head{
  margin:6px 8px 8px;
  font-size:12px;font-weight:600;line-height:1.2;
  color:var(--plj-head);text-transform:uppercase;letter-spacing:.08em;
}
.plj-menu__item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  width:100%;
  appearance:none;
  border:0;
  background:transparent;
  cursor:pointer;
  font-family:inherit;
  font-size:13px;
  font-weight:500;
  line-height:1.2;
  text-align:left;
  color:var(--plj-fg);
  padding:9px 10px;
  border-radius:8px;
  transition:background-color 160ms var(--plj-ease-out), color 160ms var(--plj-ease-out), transform 140ms var(--plj-ease-out);
}
.plj-menu__item:active{transform:scale(0.98)}
.plj-menu__item[aria-checked="true"]{background:var(--plj-accent-50);color:var(--plj-accent);font-weight:600}
/* the tint says which option is on, as in the listing's Sort menu */
.plj-menu__right{display:none}
/* a city with no projects yet — still selectable, reads as quiet */
.plj-menu__item[data-empty="true"]{color:var(--plj-faint)}

/* City: options as pills, the listing's Location panel */
.plj-menu--chips{
  display:flex;flex-wrap:wrap;align-content:flex-start;gap:6px;
  width:max-content;min-width:248px;padding:22px;
}
.plj-menu--chips .plj-menu__head{flex:0 0 100%;margin:0 0 6px}
.plj-menu--chips .plj-menu__item{
  width:auto;min-height:36px;box-sizing:border-box;justify-content:center;
  padding:7px 14px;border:1px solid var(--plj-border);border-radius:999px;
  background:var(--plj-bg);color:var(--plj-chip-ink);white-space:nowrap;
}
.plj-menu--chips .plj-menu__item[aria-checked="true"]{background:var(--plj-accent);border-color:var(--plj-accent);color:#fff}
.plj-menu--chips .plj-menu__item[data-empty="true"]{color:var(--plj-faint)}
.plj-menu--chips .plj-menu__item[data-empty="true"][aria-checked="true"]{color:#fff}

/* ── results row ──────────────────────────────────────────────────────── */
.plj-count{
  margin-right:auto;
  min-width:0;
  font-size:14px;
  font-weight:500;
  color:var(--plj-muted);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.plj-count b{font-weight:700;color:var(--plj-fg)}
/* display:none when inactive so it reserves no space in the row.
   JS flips display first, then the data-on flag, so the fade still plays. */
.plj-clear{
  display:none;
  align-items:center;
  justify-content:center;
  gap:7px;
  height:44px;
  box-sizing:border-box;
  appearance:none;
  cursor:pointer;
  font-family:inherit;
  font-size:14px;
  font-weight:600;
  line-height:1;
  color:var(--plj-accent);
  background:var(--plj-accent-50);
  border:1px solid var(--plj-accent-20);
  padding:0 16px;
  border-radius:999px;
  white-space:nowrap;
  opacity:0;
  transform:scale(0.96);
  transition:opacity 180ms var(--plj-ease-out), transform 180ms var(--plj-ease-out),
             background-color 180ms var(--plj-ease), border-color 180ms var(--plj-ease), color 180ms var(--plj-ease);
}
.plj-clear[data-on="true"]{opacity:1;transform:none}
.plj-clear:active{transform:scale(0.97)}
.plj-clear__x{width:13px;height:13px;flex:none}

/* ── empty state ──────────────────────────────────────────────────────── */
.plj-empty{
  display:none;
  padding:56px 24px;
  text-align:center;
  border:1px dashed var(--plj-border);
  border-radius:16px;
  background:var(--plj-subtle);
  font-size:16px;
  color:var(--plj-muted);
  opacity:0;
  transform:translateY(6px);
  transition:opacity 220ms var(--plj-ease-out), transform 220ms var(--plj-ease-out);
}
.plj-empty[data-on="true"]{display:block}
.plj-empty[data-in="true"]{opacity:1;transform:none}
.plj-empty b{display:block;font-size:20px;font-weight:600;color:var(--plj-fg);margin-bottom:6px}
.plj-empty span{display:block;max-width:520px;margin:0 auto;line-height:1.5}

/* ── pagination — same component as /map (.plv-pgn), values matched 1:1 ── */
.plv-pgn-wrap{display:flex;justify-content:center;padding:28px 0 0}
.plv-pgn{display:inline-flex;align-items:center;gap:4px;padding:4px;flex-wrap:wrap;justify-content:center}
.plv-pgn__b{
  min-width:40px;
  height:40px;
  border-radius:8px;
  background:transparent;
  color:#212121;
  border:1px solid #eeeeee;
  font-family:inherit;
  font-size:14px;
  font-weight:500;
  font-variant-numeric:tabular-nums;
  cursor:pointer;
  padding:0 8px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:background-color 200ms var(--plj-ease), color 200ms var(--plj-ease),
             border-color 200ms var(--plj-ease), transform 140ms var(--plj-ease-out);
}
.plv-pgn__b:active:not(:disabled){transform:scale(0.97)}
.plv-pgn__b--on{background:#1F3A5F;color:#fff;border-color:#1F3A5F}
.plv-pgn__b:disabled{opacity:.35;cursor:not-allowed}
.plv-pgn__el{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:28px;color:#acacac;font-size:14px;
}

/* ── card show/hide ───────────────────────────────────────────────────── */
.plj-hidden{display:none !important}
.plj-enter{
  opacity:0;
  transform:translateY(8px);
}
.plj-enter-active{
  opacity:1;
  transform:none;
  transition:opacity 260ms var(--plj-ease-out), transform 260ms var(--plj-ease-out);
}

@media (hover:hover) and (pointer:fine){
  .plj-seg__btn:hover{color:var(--plj-fg)}
  .plj-seg__btn[aria-selected="true"]:hover{color:#fff}
  .plj-dd__btn:hover{background:var(--plj-tint)}
  .plj-dd__btn[data-on="true"]:hover{background:var(--plj-accent-50)}
  .plj-dd--sort .plj-dd__btn:hover{background:var(--plj-bg);border-color:var(--plj-accent)}
  .plj-menu__item:hover{background:var(--plj-tint)}
  .plj-menu__item[aria-checked="true"]:hover{background:var(--plj-accent-50)}
  .plj-menu--chips .plj-menu__item[aria-checked="true"]:hover{background:var(--plj-accent-hover);border-color:var(--plj-accent-hover)}
  .plv-pgn__b:hover:not(:disabled):not(.plv-pgn__b--on){background:#f9f9f9;border-color:#e0e0e0}
  .plj-clear:hover{background:var(--plj-accent);border-color:var(--plj-accent);color:#fff}
}

/* ── tablet ───────────────────────────────────────────────────────────────
   The card stacks the way the listing rail does: search on its own row, the
   controls under it at full height with a border, the caret on the far edge. */
@media (max-width:1100px){
  .plj-bar__card{flex-wrap:wrap;gap:10px;padding:14px}
  .plj-search{flex:1 1 100%;margin-right:0}
  .plj-search__in{height:48px}
  .plj-seg{flex:1 1 auto;height:48px}
  .plj-seg__btn{flex:1 1 0;justify-content:center}
  .plj-dd--city{flex:0 0 280px}
  .plj-dd--city .plj-dd__btn{width:100%;height:48px;padding:0 16px;background:var(--plj-bg);border-color:var(--plj-border)}
  .plj-dd--city .plj-dd__btn[data-on="true"]{background:var(--plj-accent-50);border-color:transparent}
  .plj-dd--city .plj-dd__btn::after{margin-left:auto}
  /* the city panel hangs under its pill at the pill's width */
  .plj-menu--chips{left:0;right:0;width:auto;min-width:0;max-width:none}
}
/* Sticky is dropped below 992px on purpose: on a short viewport the bar sat
   under the fixed site header, travelled with the cards and covered them. */
@media (max-width:991px){
  .plj-bar{position:static;box-shadow:none !important;border-bottom-color:transparent !important;padding:4px 0 16px}
}
/* ── phone ────────────────────────────────────────────────────────────── */
@media (max-width:767px){
  .plj-seg{flex:1 1 100%}
  .plj-dd--city{flex:1 1 100%}
  /* the city panel opens under its own row, inside the flow, as the listing's
     panels do: exactly as wide as the row, never wider than the phone */
  .plj-menu--chips{
    position:static;display:none;margin-top:8px;padding:18px;
    box-shadow:none;opacity:1;visibility:visible;transform:none;pointer-events:auto;transition:none;
  }
  .plj-menu--chips[data-open="true"]{display:flex;animation:plj-drop 180ms var(--plj-ease-out)}
}
@keyframes plj-drop{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
/* One row still, at 390: the Sort label gives way to an icon and Clear to a
   round button, so the count, the order and the reset never stack. */
@media (max-width:479px){
  .plj-seg__btn{font-size:13px;padding:0 6px;gap:5px}
  .plj-dd--sort .plj-dd__lab{display:none}
  .plj-dd--sort .plj-dd__val::before{
    content:'';display:inline-block;width:16px;height:16px;margin-right:7px;vertical-align:-3px;
    background:var(--plj-mut-aa);
    -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M5 3v10M2.5 5.5 5 3l2.5 2.5M11 13V3M8.5 10.5 11 13l2.5-2.5'/></svg>") center/contain no-repeat;
            mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M5 3v10M2.5 5.5 5 3l2.5 2.5M11 13V3M8.5 10.5 11 13l2.5-2.5'/></svg>") center/contain no-repeat;
  }
  .plj-dd--sort .plj-dd__btn{padding:0 14px}
  .plj-clear{width:44px;padding:0}
  .plj-clear__t{display:none}
  .plj-clear__x{width:14px;height:14px}
}

@media (prefers-reduced-motion:reduce){
  .plj-bar *, .plj-bar,
  .plj-empty,
  .plv-pgn__b,
  .plj-hidden, .plj-enter, .plj-enter-active,
  .plj-bar *::before,
  .plj-bar *::after{
    transition-duration:1ms !important;
    animation-duration:1ms !important;
  }
  .plj-seg__btn:active,.plj-dd__btn:active,.plj-menu__item:active{transform:none}
  .plj-menu{transform:none}
  .plj-enter{transform:none}
}