/* RemoteOrNothing Jobs Explorer — responsive split-pane layout */
:root{
  color-scheme:light;
  --ink:#182b35;--muted:#637783;--bg:#f6f8f8;--white:#fff;--line:#e0e8e9;
  --green:#00695b;--dark-green:#064c45;--mint:#e6f6f1;--bluegray:#edf3f4;
  --shadow:0 9px 30px rgba(20,52,60,.045);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font:15px/1.55 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;background:var(--bg);color:var(--ink)}
a{text-decoration:none;color:inherit}
button,input,select{font:inherit}
button,a,input,select{outline-offset:3px}
button{cursor:pointer}
[hidden]{display:none!important}
.sr-only{position:absolute!important;clip:rect(0,0,0,0);clip-path:inset(50%);width:1px;height:1px;overflow:hidden;white-space:nowrap}
.explorer-inner{width:min(1460px,calc(100% - 64px));margin:0 auto}
.explorer-header{height:72px;background:var(--white);border-bottom:1px solid var(--line)}
.explorer-header .explorer-inner{height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px}
.explorer-brand{display:flex;align-items:center;gap:8px;font-size:19px;font-weight:820;letter-spacing:-.045em;color:#153b3a;white-space:nowrap}
.explorer-brand>span:not(.brand-mark){margin-left:-8px;color:var(--green)}
.explorer-brand strong{font-size:12px;font-weight:760;background:var(--mint);padding:4px 9px;border-radius:99px;color:#036151;margin-left:4px;letter-spacing:0}
.brand-mark{width:34px;height:34px;display:grid;place-items:center;border-radius:9px;background:var(--dark-green);color:#fff;font-weight:900;font-size:19px;margin-right:2px}
.brand-mark span{color:#77dfc0}
.explorer-nav{display:flex;gap:28px;align-items:center;font-size:13px;font-weight:650;color:#556a73}
.explorer-nav a:hover,.explorer-nav a[aria-current]{color:var(--dark-green)}
.explorer-intro{padding:44px 0 36px;border-bottom:1px solid #dbe4e6;background:linear-gradient(110deg,#f6fbf9 4%,#e7f3f0 60%,#e9f2f3 100%)}
.intro-eyebrow{color:#077563;letter-spacing:.12em;font-size:11px;font-weight:820}
.mini-signal{display:inline-block;background:#55bb96;width:5px;height:5px;margin:0 9px 2px;border-radius:50%}
.explorer-intro h1{font-size:clamp(36px,4.6vw,60px);line-height:1.13;letter-spacing:-.065em;font-weight:780;margin:15px 0 9px}
.explorer-intro h1 em{font-style:normal;color:var(--green)}
.explorer-intro p{font-size:15px;color:#536b72;margin:0 0 25px}
.explorer-filters{display:grid;grid-template-columns:minmax(260px,2fr) minmax(170px,1fr) minmax(170px,1fr) auto auto;align-items:stretch;gap:10px;padding:9px;border:1px solid #d7e3e3;border-radius:14px;background:#fff;box-shadow:0 12px 35px rgba(11,82,66,.07);max-width:1230px}
.explorer-keyword{display:flex;align-items:center;gap:9px;padding:0 12px;border-right:1px solid var(--line)}
.search-ico{font-size:26px;color:#6c8786;font-weight:400}
.explorer-keyword input{border:0;background:transparent;width:100%;min-width:0;outline:0;color:var(--ink);padding:11px 0;font-size:14px}
.explorer-keyword input::placeholder{color:#8ca0a5}
.select-field{display:flex;align-items:center}
.select-field select{border:0;width:100%;min-width:0;padding:12px 8px;background:#fff;color:#445e64;font-size:13px;cursor:pointer}
.filter-submit{border:0;border-radius:9px;background:var(--dark-green);color:#fff;font-size:13px;font-weight:750;padding:0 24px;white-space:nowrap}
.filter-submit:hover,.primary-cta:hover{background:#086b5c}
.clear-filters{align-self:center;padding:0 8px;color:#456a66;font-size:12px;font-weight:650}
.explorer-content{padding:26px 0 50px}
.explorer-content-head{display:flex;justify-content:space-between;align-items:end;gap:22px;margin-bottom:18px}
.explorer-content-head h2{font-size:21px;letter-spacing:-.035em;margin:0 0 3px}
.explorer-content-head p{font-size:12px;color:#6b8189;margin:0}
.research-caption{font-size:12px;color:#69817d;font-weight:580;white-space:nowrap}
.status-dot{display:inline-block;background:#19a780;height:7px;width:7px;border-radius:50%;margin-right:6px;vertical-align:middle}
.explorer-grid{display:grid;grid-template-columns:minmax(315px,43%) minmax(0,57%);height:min(78vh,760px);min-height:590px;border:1px solid #dce6e7;border-radius:16px;overflow:hidden;background:var(--white);box-shadow:var(--shadow)}
.results-column{border-right:1px solid #dce6e7;min-width:0;overflow:hidden}
.results-scroll{height:100%;overflow-y:auto;overscroll-behavior:contain;scrollbar-color:#c4d4d5 transparent;scrollbar-width:thin}
.result-card{border-bottom:1px solid var(--line);background:#fff;position:relative}
.result-card.is-active{background:#eaf3f2}
.result-card.is-active::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--green)}
.result-card:hover{background:#f1f7f6}
.job-result-link{display:block;padding:21px 24px;outline-offset:-3px}
.result-topline{display:flex;align-items:center;justify-content:space-between;gap:12px}
.company-avatar{display:inline-grid;place-items:center;flex:none;width:43px;height:43px;border-radius:10px;color:#185849;background:linear-gradient(140deg,#e3f3ef,#d6e9e8);font-size:15px;font-weight:800;letter-spacing:-.02em}
.result-badge{background:#e1f4eb;color:#136747;font-size:11px;border-radius:99px;padding:4px 10px;font-weight:750}
.result-company{font-size:12px;color:#60747e;margin-top:12px;font-weight:600}
.result-card h3{font-size:18px;line-height:1.3;letter-spacing:-.025em;margin:4px 0 9px;font-weight:750;color:#1b3641}
.result-info{display:flex;flex-wrap:wrap;gap:6px;font-size:12px;color:#617781}
.result-summary{margin:12px 0;color:#677e87;font-size:12px;line-height:1.65;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.result-read{display:block;margin-top:14px;color:var(--green);font-size:12px;font-weight:750}
.details-column{min-width:0;overflow:hidden;background:#fff}
.details-scroll{height:100%;overflow-y:auto;scrollbar-color:#c4d4d5 transparent;scrollbar-width:thin;overscroll-behavior:contain}
.pane-sticky-top{position:sticky;top:0;background:#fff;border-bottom:1px solid #e6edef;z-index:5;min-height:58px;padding:10px 26px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.pane-top-label{font-size:11px;font-weight:720;color:#627d80}
.pane-actions{display:flex;gap:14px;align-items:center}
.text-action{padding:7px 0;font-size:12px;color:#355e5a;font-weight:650;border:0;background:transparent}
.text-action:hover{color:var(--green)}
.pane-head{display:flex;align-items:start;gap:15px;padding:29px 29px 17px}
.pane-head .company-avatar{height:55px;width:55px;font-size:18px}
.pane-company{font-size:13px;font-weight:700;color:#61747b}
.pane-heading h2{font-size:clamp(23px,2.5vw,31px);letter-spacing:-.045em;line-height:1.18;margin:6px 0 14px;font-weight:790}
.pane-tags{display:flex;flex-wrap:wrap;gap:7px}
.pane-tags span{font-size:11px;border:1px solid #d8e4e4;border-radius:6px;color:#546e73;padding:4px 9px}
.pane-tags span:first-child{color:#116c4c;background:#e3f5eb;border-color:#d6efe3}
.pane-location{margin:0 29px 22px;padding:14px 16px;border-left:3px solid #409e81;background:#eef7f4;border-radius:7px}
.fact-label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:#5b7e71;margin-bottom:3px}
.pane-location strong{display:block;font-size:13px;color:#28594e;font-weight:700}
.pane-cta-row{padding:0 29px 24px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.primary-cta{padding:12px 19px;background:var(--dark-green);color:#fff;border-radius:8px;font-size:13px;font-weight:800;white-space:nowrap}
.source-caption{font-size:11px;color:#82959c}
.pane-content .role-editorial{margin:0 29px 26px;background:#f1faf7;border:1px solid #cce9db;padding:17px 20px;border-radius:10px}
.pane-content .role-editorial .eyebrow{color:var(--green);font-size:10px;letter-spacing:.09em}
.pane-content .role-editorial p{color:#36534d;font-size:12px;line-height:1.75}
.pane-content .role-editorial .source-note{color:#6b827d}
.pane-section{border-top:1px solid #e1e8e9;padding:23px 29px}
.pane-section h3{margin:0 0 10px;font-size:17px;letter-spacing:-.02em}
.section-explainer{font-size:11px;color:#778f97;margin:0 0 18px}
.pane-description{font-size:13px;line-height:1.8;color:#384c55}
.pane-description .role-paragraph{margin:0 0 13px}
.pane-description .role-subheading{margin:22px 0 9px;font-size:14px;line-height:1.35;color:#1d3741}
.pane-description .role-bullets{padding-left:20px;margin:8px 0 18px}
.pane-description .role-bullets li{padding-left:3px;margin-bottom:7px}
.pane-description .role-bullets li::marker{color:#0d8066}
.pane-last p{font-size:13px;color:#5c737b}
.pane-internal-link{font-weight:720;color:var(--green)}
.panel-empty{padding:50px 35px;color:#688087}
.explorer-disclaimer{font-size:11px;color:#7a8c94;margin:18px 4px;line-height:1.65}
.explorer-footer{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:28px 0;border-top:1px solid #dee8e8;font-size:12px;color:#85979e}
.explorer-footer a{color:#416f68}
.no-results{padding:36px 26px;color:#5a727a}
.no-results a{color:var(--green);font-weight:750}
.mobile-detail-back{display:none}
@media(max-width:1100px){
 .explorer-inner{width:calc(100% - 42px)}
 .explorer-grid{grid-template-columns:minmax(295px,45%) minmax(0,55%)}
 .explorer-filters{grid-template-columns:minmax(240px,2fr) minmax(140px,1fr) minmax(140px,1fr) auto}
 .clear-filters{grid-column:1/-1;justify-self:end}
 .pane-head{padding:22px}
 .pane-location{margin:0 22px 18px}
 .pane-section{padding:21px 22px}
 .pane-cta-row{padding:0 22px 20px}
 .pane-sticky-top{padding:10px 22px}
 .pane-content .role-editorial{margin:0 22px 22px}
}
@media(max-width:760px){
 .explorer-header{height:auto;min-height:66px}
 .explorer-header .explorer-inner{padding:13px 0;align-items:start;flex-wrap:wrap}
 .explorer-nav{gap:16px;font-size:12px}
 .explorer-inner{width:calc(100% - 30px)}
 .explorer-intro{padding:30px 0 23px}
 .explorer-intro h1{font-size:36px}
 .explorer-filters{grid-template-columns:1fr 1fr;gap:8px}
 .explorer-keyword{grid-column:1/-1;border-right:0;border-bottom:1px solid #e4ecec}
 .filter-submit{padding:12px 16px}
 .clear-filters{grid-column:auto}
 .explorer-grid{display:block;height:auto;min-height:0;overflow:visible;border:0;background:transparent;box-shadow:none}
 .results-column{border:1px solid #dce6e7;border-radius:12px;background:#fff}
 .results-scroll{height:auto;overflow:visible}
 .details-column{display:none;position:fixed;inset:0;background:#fff;z-index:70}
 .details-column.mobile-open{display:block}
 .details-scroll{height:100%;overflow-y:auto}
 .mobile-detail-back{display:inline-flex}
 .details-column .pane-sticky-top{padding:10px 15px}
 .details-column .pane-open-page{display:none}
 .pane-head{padding:20px 18px}
 .pane-section{padding:18px}
 .pane-location{margin:0 18px 18px}
 .pane-cta-row{padding:0 18px 20px}
 .pane-content .role-editorial{margin:0 18px 20px}
 .job-result-link{padding:18px 20px}
}
@media(max-width:430px){
 .explorer-intro h1{font-size:32px}
 .explorer-nav{gap:12px;font-size:11px}
 .explorer-brand{font-size:17px}
 .explorer-filters{grid-template-columns:1fr}
 .explorer-keyword{grid-column:auto}
 .explorer-filters .select-field{border-bottom:1px solid #e9eeee}
 .filter-submit{height:43px}
 .explorer-content-head{align-items:start;flex-direction:column}
 .research-caption{white-space:normal}
 .explorer-footer{align-items:start;flex-direction:column}
}

/* Individual /roles/:slug pages retain their own shareable URL and the same visual language. */
.standalone-outer{padding-top:25px;padding-bottom:55px}
.standalone-breadcrumb{display:flex;align-items:center;gap:11px;color:#71858e;font-size:13px;margin:0 0 17px}
.standalone-breadcrumb a{color:#0b7563;font-weight:730}
.role-standalone{max-width:920px;margin:auto;background:#fff;border:1px solid #dbe5e6;border-radius:16px;overflow:hidden;box-shadow:var(--shadow)}
.role-standalone .details-scroll{height:auto;overflow:visible}
.role-standalone .pane-head{padding:30px 34px}
.role-standalone .pane-location{margin:0 34px 22px}
.role-standalone .pane-cta-row{padding:0 34px 25px}
.role-standalone .pane-section{padding:27px 34px}
.role-standalone .pane-content .role-editorial{margin:0 34px 26px}
.related-section{margin:38px 0 0}
.related-section h2{font-size:20px;letter-spacing:-.035em}
.related-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.related-role{display:flex;flex-direction:column;gap:5px;padding:16px 19px;background:white;border:1px solid #dce5e6;border-radius:12px;color:#20433c;font-weight:760;font-size:14px}
.related-role small{font-size:12px;color:#69828b;font-weight:570}
.related-role:hover{border-color:#58a999}
@media(max-width:760px){.role-standalone .pane-head{padding:23px 18px}.role-standalone .pane-location{margin:0 18px 18px}.role-standalone .pane-cta-row{padding:0 18px 19px}.role-standalone .pane-section{padding:18px}.role-standalone .pane-content .role-editorial{margin:0 18px 20px}.related-grid{grid-template-columns:1fr}}