/*
 * Explorer look — light hero with a what + where search, "Browse jobs" lists on the home,
 * and on job lists a title bar, a filter sidebar and detailed job rows.
 * Built on the JobCore tokens, so it follows the board accent and dark mode.
 */

body.wpjc-skin-explorer{
  --wpjcx-radius:14px;
  --wpjcx-shadow:0 1px 2px rgba(15,23,42,.04),0 6px 20px -8px rgba(15,23,42,.12);
  --wpjcx-tint:color-mix(in srgb,var(--wpjc-a) 7%,var(--wpjc-paper));
  --wpjcx-new:#15803d;
}

/* ---------- Home hero: light, what + where ---------- */
body.wpjc-skin-explorer .wpjc-hero{
  background:
    radial-gradient(900px 320px at 85% -10%,color-mix(in srgb,var(--wpjc-a) 16%,transparent),transparent 70%),
    radial-gradient(700px 260px at 0% 110%,color-mix(in srgb,var(--wpjc-a) 10%,transparent),transparent 70%),
    var(--wpjcx-tint);
  border-bottom:1px solid var(--wpjc-line);
  color:var(--wpjc-ink);
}
body.wpjc-skin-explorer .wpjc-hero__inner{ padding-block:56px 60px; }
body.wpjc-skin-explorer .wpjc-hero__title{
  color:var(--wpjc-ink);
  font-size:clamp(30px,4vw,48px);
  font-weight:800;
  letter-spacing:-.035em;
}
body.wpjc-skin-explorer .wpjc-hero__intro{ margin-bottom:28px; color:var(--wpjc-muted); opacity:1; font-size:17px; }
body.wpjc-skin-explorer .wpjc-search{
  max-width:760px;
  height:64px;
  padding:0 8px 0 22px;
  border:1px solid var(--wpjc-line);
  border-radius:16px;
  box-shadow:0 18px 40px -18px rgba(15,23,42,.25);
}
body.wpjc-skin-explorer .wpjc-search__input{ font-size:16px; }
body.wpjc-skin-explorer .wpjcx-where{
  display:flex;
  align-items:center;
  gap:8px;
  flex:0 1 38%;
  min-width:0;
  height:60%;
  padding-left:16px;
  border-left:1px solid var(--wpjc-line);
  color:var(--wpjc-faint);
}
body.wpjc-skin-explorer .wpjcx-where input{
  flex:1 1 auto;
  min-width:0;
  height:100%;
  padding:0;
  border:0;
  outline:0;
  background:transparent;
  color:var(--wpjc-ink);
  font:inherit;
  font-size:16px;
}
body.wpjc-skin-explorer .wpjcx-where input::placeholder{ color:var(--wpjc-faint); }
body.wpjc-skin-explorer .wpjc-search__btn{
  width:auto;
  height:48px;
  padding:0 22px;
  border-radius:11px;
  font-weight:700;
}
body.wpjc-skin-explorer .wpjc-search__btn::after{ content:attr(aria-label); margin-left:8px; font-size:15px; }
body.wpjc-skin-explorer .wpjc-hero .wpjc-adv{ display:none; }
@media (max-width:640px){
  body.wpjc-skin-explorer .wpjc-hero__inner{ padding-block:34px 38px; }
  body.wpjc-skin-explorer .wpjc-search{ flex-wrap:wrap; height:auto; padding:8px; gap:6px; }
  body.wpjc-skin-explorer .wpjc-search__input{ flex:1 1 100%; height:46px; padding:0 12px; }
  body.wpjc-skin-explorer .wpjcx-where{ flex:1 1 auto; height:46px; padding:0 12px; border-left:0; border-top:1px solid var(--wpjc-line); }
  body.wpjc-skin-explorer .wpjc-search__btn{ flex:1 1 100%; }
}

/* ---------- Home: browse jobs ---------- */
.wpjcx-browse{ margin-top:12px; }
.wpjcx-browse__cols{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.wpjcx-browse__col{ padding:20px 22px; border:1px solid var(--wpjc-line); border-radius:var(--wpjcx-radius,14px); background:var(--wpjc-paper); }
.wpjcx-browse__col h3{ margin:0 0 10px; color:var(--wpjc-ink); font-size:15px; font-weight:700; }
.wpjcx-browse__col ul{ display:grid; gap:2px; margin:0; padding:0; list-style:none; }
.wpjcx-browse__col a{ display:flex; justify-content:space-between; gap:12px; padding:7px 10px; margin:0 -10px; border-radius:8px; color:var(--wpjc-text); font-size:14px; text-decoration:none; }
.wpjcx-browse__col a:hover{ background:var(--wpjc-hover); color:var(--wpjc-a); }
.wpjcx-browse__n{ color:var(--wpjc-faint); font-size:13px; font-variant-numeric:tabular-nums; }
@media (max-width:900px){ .wpjcx-browse__cols{ grid-template-columns:1fr; } }

/* ---------- List: title bar ---------- */
.wpjcx-head{
  border-bottom:1px solid var(--wpjc-line);
  background:
    radial-gradient(700px 240px at 92% -20%,color-mix(in srgb,var(--wpjc-a) 14%,transparent),transparent 70%),
    var(--wpjcx-tint,var(--wpjc-soft));
}
.wpjcx-head .wpjc-wrap{ padding-block:4px 30px; }
.wpjcx-head__crumbs{ padding-bottom:10px; }
.wpjcx-head__title{ margin:0 0 6px; color:var(--wpjc-ink); font-size:clamp(26px,3vw,38px); font-weight:800; letter-spacing:-.03em; line-height:1.15; }
.wpjcx-head__count{ margin:0; color:var(--wpjc-muted); font-size:16px; }
.wpjcx-head__count strong{ color:var(--wpjc-a); }
.wpjcx-head__intro{ max-width:760px; margin:12px 0 0; color:var(--wpjc-text); font-size:15px; line-height:1.6; }

/* ---------- List: layout ---------- */
.wpjcx-layout{ display:grid; grid-template-columns:300px minmax(0,1fr); gap:28px; align-items:start; padding-block:28px 56px; }

/* Sidebar */
.wpjcx-side{ display:grid; gap:16px; }
.wpjcx-filters{ padding:6px 18px 18px; border:1px solid var(--wpjc-line); border-radius:var(--wpjcx-radius,14px); background:var(--wpjc-paper); box-shadow:var(--wpjcx-shadow); transition:opacity .15s; }
.wpjcx-filters.is-busy{ opacity:.6; pointer-events:none; }
.wpjcx-side__head{ display:flex; align-items:center; gap:10px; padding:12px 0 10px; }
.wpjcx-side__title{ display:flex; align-items:center; gap:8px; margin:0; color:var(--wpjc-ink); font-size:16px; font-weight:800; }
.wpjcx-side__title svg{ color:var(--wpjc-a); }
.wpjcx-side__clear{ margin-left:auto; color:var(--wpjc-a); font-size:13px; font-weight:600; text-decoration:none; }
.wpjcx-side__clear:hover{ text-decoration:underline; }
.wpjcx-side__close{ display:none; margin-left:auto; width:36px; height:36px; padding:0; border:0; border-radius:50%; background:var(--wpjc-hover); color:var(--wpjc-ink); cursor:pointer; align-items:center; justify-content:center; }
.wpjcx-side__clear + .wpjcx-side__close{ margin-left:4px; }

.wpjcx-search{ display:grid; gap:10px; padding:4px 0 14px; border-bottom:1px solid var(--wpjc-line); }
.wpjcx-field{ display:grid; gap:5px; }
.wpjcx-field > span:first-child{ color:var(--wpjc-ink); font-size:12px; font-weight:700; letter-spacing:.02em; }
.wpjcx-input{ display:flex; align-items:center; gap:8px; height:42px; padding:0 12px; border:1px solid var(--wpjc-line); border-radius:10px; background:var(--wpjc-paper); color:var(--wpjc-faint); transition:border-color .15s,box-shadow .15s; }
.wpjcx-input:focus-within{ border-color:var(--wpjc-a); box-shadow:0 0 0 3px color-mix(in srgb,var(--wpjc-a) 16%,transparent); }
.wpjcx-input input{ flex:1 1 auto; min-width:0; height:100%; padding:0; border:0; outline:0; background:transparent; color:var(--wpjc-ink); font:inherit; font-size:14px; }

.wpjcx-group{ border-bottom:1px solid var(--wpjc-line); }
.wpjcx-group > summary{ display:flex; align-items:center; gap:8px; padding:14px 0 12px; color:var(--wpjc-ink); font-size:14px; font-weight:700; list-style:none; cursor:pointer; }
.wpjcx-group > summary::-webkit-details-marker{ display:none; }
.wpjcx-group > summary > svg{ margin-left:auto; color:var(--wpjc-faint); transition:transform .2s; }
.wpjcx-group[open] > summary > svg{ transform:rotate(180deg); }
.wpjcx-group__n{ display:inline-grid; place-items:center; min-width:20px; height:20px; padding:0 6px; border-radius:999px; background:var(--wpjc-a); color:#fff; font-size:11px; font-weight:800; }
.wpjcx-list{ display:grid; gap:2px; margin:0; padding:0 0 10px; list-style:none; }
.wpjcx-check{ position:relative; display:flex; align-items:center; gap:10px; padding:6px 8px; margin:0 -8px; border-radius:8px; color:var(--wpjc-text); font-size:14px; cursor:pointer; }
.wpjcx-check:hover{ background:var(--wpjc-hover); }
.wpjcx-check input{ position:absolute; opacity:0; pointer-events:none; }
.wpjcx-check__box{ display:inline-grid; place-items:center; flex:none; width:18px; height:18px; border:1.5px solid var(--wpjc-line-2); border-radius:5px; background:var(--wpjc-paper); color:#fff; transition:background-color .15s,border-color .15s; }
.wpjcx-check__box svg{ opacity:0; stroke-width:3; }
.wpjcx-check input:checked + .wpjcx-check__box{ border-color:var(--wpjc-a); background:var(--wpjc-a); }
.wpjcx-check input:checked + .wpjcx-check__box svg{ opacity:1; }
.wpjcx-check input:focus-visible + .wpjcx-check__box{ outline:2px solid var(--wpjc-a); outline-offset:2px; }
.wpjcx-check--radio .wpjcx-check__box{ border-radius:50%; }
.wpjcx-check--radio input:checked + .wpjcx-check__box{ background:var(--wpjc-paper); box-shadow:inset 0 0 0 4px var(--wpjc-a); }
.wpjcx-check input:checked ~ .wpjcx-check__label{ color:var(--wpjc-ink); font-weight:600; }
.wpjcx-check__label{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wpjcx-check__n{ flex:none; min-width:26px; padding:1px 7px; border-radius:999px; background:var(--wpjc-hover); color:var(--wpjc-muted); font-size:12px; text-align:center; font-variant-numeric:tabular-nums; }
.wpjcx-more > summary{ display:inline-block; margin:0 0 10px; color:var(--wpjc-a); font-size:13px; font-weight:700; list-style:none; cursor:pointer; }
.wpjcx-more > summary::-webkit-details-marker{ display:none; }
.wpjcx-more__close, .wpjcx-more[open] .wpjcx-more__open{ display:none; }
.wpjcx-more[open] .wpjcx-more__close{ display:inline; }
.wpjcx-more[open] > summary{ order:2; }
.wpjcx-more[open]{ display:flex; flex-direction:column; }

.wpjcx-switch{ position:relative; display:flex; align-items:center; gap:10px; padding:14px 0 4px; color:var(--wpjc-ink); font-size:14px; font-weight:700; cursor:pointer; }
.wpjcx-switch input{ position:absolute; opacity:0; pointer-events:none; }
.wpjcx-switch__track{ position:relative; flex:none; width:38px; height:22px; border-radius:999px; background:var(--wpjc-line-2); transition:background-color .2s; }
.wpjcx-switch__track::after{ content:""; position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .2s; }
.wpjcx-switch input:checked + .wpjcx-switch__track{ background:var(--wpjc-a); }
.wpjcx-switch input:checked + .wpjcx-switch__track::after{ transform:translateX(16px); }
.wpjcx-switch input:focus-visible + .wpjcx-switch__track{ outline:2px solid var(--wpjc-a); outline-offset:2px; }
.wpjcx-switch__label{ flex:1 1 auto; }
.wpjcx-side__foot{ padding-top:14px; }
.wpjcx-ready .wpjcx-side__foot{ display:none; }

.wpjcx-alert{ display:grid; gap:6px; padding:18px; border:1px solid color-mix(in srgb,var(--wpjc-a) 25%,var(--wpjc-line)); border-radius:var(--wpjcx-radius,14px); background:var(--wpjcx-tint,var(--wpjc-soft)); }
.wpjcx-alert__icon{ display:inline-grid; place-items:center; width:38px; height:38px; margin-bottom:4px; border-radius:11px; background:var(--wpjc-a); color:#fff; }
.wpjcx-alert__title{ margin:0; color:var(--wpjc-ink); font-size:15px; font-weight:800; }
.wpjcx-alert__text{ margin:0 0 6px; color:var(--wpjc-muted); font-size:13px; line-height:1.5; }

/* Results bar */
.wpjcx-bar{ display:flex; align-items:center; gap:12px; margin:0 0 14px; }
.wpjcx-bar__count{ margin:0; color:var(--wpjc-muted); font-size:15px; }
.wpjcx-bar__count strong{ color:var(--wpjc-ink); font-size:17px; }
.wpjcx-bar__filters{ display:none; align-items:center; gap:8px; height:40px; padding:0 14px; border:1px solid var(--wpjc-line); border-radius:10px; background:var(--wpjc-paper); color:var(--wpjc-ink); font:inherit; font-size:14px; font-weight:700; cursor:pointer; }
.wpjcx-bar__n{ display:inline-grid; place-items:center; min-width:20px; height:20px; padding:0 6px; border-radius:999px; background:var(--wpjc-a); color:#fff; font-size:11px; }
.wpjcx-sort{ display:flex; align-items:center; gap:8px; margin-left:auto; color:var(--wpjc-muted); font-size:13px; }
.wpjcx-sort select{ height:40px; padding:0 34px 0 12px; border:1px solid var(--wpjc-line); border-radius:10px; background:var(--wpjc-paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center; color:var(--wpjc-ink); font:inherit; font-size:14px; font-weight:600; appearance:none; -webkit-appearance:none; cursor:pointer; }
.wpjcx-chips{ margin:0 0 16px; }

/* Job rows */
.wpjcx-jobs{ display:grid; grid-template-columns:1fr; gap:12px; margin:0; padding:0; list-style:none; }
.wpjcx-job{
  position:relative;
  display:grid;
  grid-template-columns:64px minmax(0,1fr) auto;
  gap:18px;
  padding:20px 22px;
  border:1px solid var(--wpjc-line);
  border-radius:var(--wpjcx-radius,14px);
  background:var(--wpjc-paper);
  box-shadow:var(--wpjcx-shadow);
  transition:border-color .15s,box-shadow .15s,transform .15s;
}
.wpjcx-job:hover{ border-color:color-mix(in srgb,var(--wpjc-a) 45%,var(--wpjc-line)); box-shadow:0 14px 34px -14px rgba(15,23,42,.25); }
.wpjcx-job.is-top{ background:linear-gradient(90deg,color-mix(in srgb,var(--wpjc-tier) 7%,var(--wpjc-paper)),var(--wpjc-paper) 45%); }
.wpjcx-job.is-top::before{ content:""; position:absolute; top:14px; bottom:14px; left:-1px; width:4px; border-radius:0 4px 4px 0; background:var(--wpjc-tier); }
.wpjcx-job__logo{ display:flex; align-items:center; justify-content:center; width:64px; height:64px; overflow:hidden; border:1px solid var(--wpjc-line); border-radius:12px; background:var(--wpjc-logo-bg,#fff); text-decoration:none; }
.wpjcx-job__logo img{ max-width:84%; max-height:84%; object-fit:contain; }
.wpjcx-job__logo span{ color:var(--wpjc-a); font-size:24px; font-weight:800; }
.wpjcx-job__body{ min-width:0; }
.wpjcx-job__labels{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 6px; }
.wpjcx-label{ display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:999px; background:var(--wpjc-hover); color:var(--wpjc-muted); font-size:11px; font-weight:700; letter-spacing:.02em; }
.wpjcx-label--top{ background:color-mix(in srgb,var(--wpjc-tier) 14%,var(--wpjc-paper)); color:color-mix(in srgb,var(--wpjc-tier) 80%,var(--wpjc-ink)); }
.wpjcx-label--new{ background:color-mix(in srgb,var(--wpjcx-new) 13%,var(--wpjc-paper)); color:var(--wpjcx-new); }
.wpjcx-job__title{ margin:0; font-size:18px; font-weight:750; letter-spacing:-.015em; line-height:1.3; }
.wpjcx-job__title a{ color:var(--wpjc-ink); text-decoration:none; }
.wpjcx-job__title a::after{ content:""; position:absolute; inset:0; border-radius:inherit; }
.wpjcx-job__title a:hover{ color:var(--wpjc-a); }
.wpjcx-job__company{ margin:2px 0 0; color:var(--wpjc-muted); font-size:14px; font-weight:600; }
.wpjcx-job__facts{ display:flex; flex-wrap:wrap; gap:6px 16px; margin:10px 0 0; padding:0; list-style:none; }
.wpjcx-job__facts li{ display:inline-flex; align-items:center; gap:6px; color:var(--wpjc-text); font-size:13.5px; }
.wpjcx-job__facts svg{ flex:none; color:var(--wpjc-faint); }
.wpjcx-job__text{ display:-webkit-box; margin:10px 0 0; overflow:hidden; color:var(--wpjc-muted); font-size:13.5px; line-height:1.55; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.wpjcx-job__side{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:flex-end; gap:6px; min-width:110px; }
.wpjcx-job__fav{ margin:-6px -6px 0 0; }
.wpjcx-job__when{ margin:auto 0 0; color:var(--wpjc-faint); font-size:12px; white-space:nowrap; }
.wpjcx-job__soon{ margin:0; color:#dc2626; font-size:12px; font-weight:700; white-space:nowrap; }
.wpjcx-job__go{ margin-top:4px; }
.wpjcx-jobs > li:not(.wpjcx-job){ list-style:none; }

.wpjcx-empty{ display:grid; justify-items:center; gap:6px; padding:48px 24px; border:1px dashed var(--wpjc-line-2); border-radius:var(--wpjcx-radius,14px); background:var(--wpjc-paper); color:var(--wpjc-muted); text-align:center; }
.wpjcx-empty__icon{ display:inline-grid; place-items:center; width:52px; height:52px; margin-bottom:6px; border-radius:50%; background:var(--wpjc-hover); color:var(--wpjc-faint); }
.wpjcx-empty__title{ margin:0; color:var(--wpjc-ink); font-size:17px; font-weight:800; }
.wpjcx-empty p{ max-width:420px; margin:0 0 8px; }
.wpjcx-pager{ margin-top:24px; }

/* ---------- Phones and tablets: filters as a panel ---------- */
@media (max-width:900px){
  .wpjcx-layout{ grid-template-columns:1fr; gap:16px; padding-top:18px; }
  .wpjcx-ready .wpjcx-side{
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    z-index:120;
    width:min(380px,88vw);
    overflow:auto;
    overscroll-behavior:contain;
    padding:0;
    gap:0;
    background:var(--wpjc-paper);
    box-shadow:0 0 40px rgba(0,0,0,.25);
    transform:translateX(-105%);
    transition:transform .25s ease;
    visibility:hidden;
  }
  .wpjcx-ready .wpjcx-side.is-open{ transform:none; visibility:visible; }
  .wpjcx-ready .wpjcx-filters{ border:0; border-radius:0; box-shadow:none; padding-bottom:90px; }
  .wpjcx-ready .wpjcx-side__close{ display:inline-flex; }
  .wpjcx-ready .wpjcx-side__foot{ display:block; position:fixed; bottom:0; left:0; width:min(380px,88vw); padding:12px 18px calc(12px + env(safe-area-inset-bottom)); border-top:1px solid var(--wpjc-line); background:var(--wpjc-paper); }
  .wpjcx-ready .wpjcx-alert{ margin:0 18px 100px; }
  .wpjcx-ready .wpjcx-bar__filters{ display:inline-flex; }
  .wpjcx-scrim{ position:fixed; inset:0; z-index:110; background:rgba(15,23,42,.45); }
  .wpjcx-locked, .wpjcx-locked body{ overflow:hidden; }
  .wpjcx-bar__count{ display:none; }
  .wpjcx-sort > span{ display:none; }
}
@media (max-width:640px){
  .wpjcx-job{ grid-template-columns:48px minmax(0,1fr); gap:12px 14px; padding:16px; }
  .wpjcx-job__logo{ width:48px; height:48px; border-radius:10px; }
  .wpjcx-job__side{ grid-column:1 / -1; flex-direction:row; align-items:center; min-width:0; }
  .wpjcx-job__fav{ position:absolute; top:12px; right:12px; margin:0; }
  .wpjcx-job__when{ margin:0 auto 0 0; }
  .wpjcx-job__go{ margin:0; }
  .wpjcx-job__title{ padding-right:30px; font-size:16.5px; }
  .wpjcx-job__text{ display:none; }
}
html[data-wpjc-scheme="dark"] body.wpjc-skin-explorer,
html[data-theme="dark"] body.wpjc-skin-explorer{ --wpjcx-new:#4ade80; --wpjcx-shadow:none; }