/* =====================================================================
   Public results 页面样式
   复刻自 public.janoshik.com 的原样式（skel 模板子集 + 搜索栏样式）
   字体 Lato 已自托管，离线可用
   ===================================================================== */
@font-face{font-family:'Lato';font-style:normal;font-weight:300;font-display:swap;src:url('/fonts/lato-300.woff2') format('woff2')}
@font-face{font-family:'Lato';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/lato-400.woff2') format('woff2')}
@font-face{font-family:'Lato';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/lato-700.woff2') format('woff2')}

/* reset + 该页面用到的原样式 */
html,body,div,span,h1,h2,h3,h4,h5,h6,p,a,ul,li,header,nav,section{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}
header,nav,section{display:block}
body{line-height:1;-webkit-text-size-adjust:none}
*,*:before,*:after{box-sizing:border-box}
body{background:#fff;display:block!important;color:#444;font-family:"Lato",Helvetica,sans-serif;font-size:15pt;font-weight:300;line-height:1.65em}
body,input,button{font-family:"Lato",Helvetica,sans-serif}
a{color:#2D6296;text-decoration:underline}
a:hover{text-decoration:none}
p{margin:0 0 2em 0}
h1,h2,h3,h4,h5,h6{color:#666;font-weight:300;line-height:1em;margin:0 0 1em 0}
h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{color:inherit;text-decoration:none}
h2{font-size:1.75em;line-height:1.5em}
h3{font-size:1.35em;line-height:1.5em}
h6{font-size:.7em;line-height:1.5em}
.container{margin-left:auto;margin-right:auto;width:1400px}

#header{background-color:#0B233B;color:#fff;cursor:default;height:4.75em;line-height:4.75em;width:100%;z-index:10000}
#header h1{color:#fff;height:inherit;left:2.5em;line-height:inherit;margin:0;position:absolute;top:0}
#header h1 a{color:#fff;text-decoration:none}
#header nav{height:inherit;line-height:inherit;position:absolute;right:2.5em;top:0;vertical-align:middle}
#header nav>ul{list-style:none;margin:0;padding-left:0}
#header nav>ul>li{border-radius:4px;display:inline-block;margin-left:.5em;padding-left:0}
#header nav>ul>li a{color:#fff;display:inline-block;text-decoration:none;height:2.25em;line-height:2.25em;padding:0 1em;border-radius:4px}
#header nav>ul>li a:hover{background-color:rgba(255,255,255,.075)}

.wrapper{padding:2em 0 4em}
header p{position:relative;margin:0 0 1.5em 0}
header.major{text-align:center;margin-bottom:1em}
header.major h2{font-size:3em}
header.major p{border-top:medium double rgba(144,144,144,.25);display:inline-block;padding:2em 2em 0 2em}
ul{list-style:disc;margin:0 0 2em 0;padding-left:1em}
ul.alt{list-style:none;padding-left:0}
ul.alt li{border-top:solid 1px rgba(144,144,144,.25);padding:.8em 0}
ul.alt li:first-child{border-top:0;padding-top:0}

a.news:link,a.news:visited{color:inherit;text-decoration:none}
a.news:hover{color:#aaa;text-decoration:none}
.sticky{transition:transform .2s}
.sticky:hover{transform:scale(1.05)}
.test-link{text-decoration:none;color:inherit}
.test-link:hover{opacity:.9}
.empty{text-align:center;padding:2em}
.float-right{float:right}
.tiny{font-size:.5em}

input[type="text"]{appearance:none;background:rgba(144,144,144,.075);border-radius:4px;border:solid 1px rgba(144,144,144,.25);color:inherit;display:block;outline:0;padding:0 1em;text-decoration:none;width:100%;height:2.75em}
input[type="text"]:focus{border-color:#2D6296;box-shadow:0 0 0 1px #2D6296}
button{appearance:none;transition:background-color .2s ease-in-out,color .2s ease-in-out;background-color:#2D6296;border-radius:4px;border:0;color:#fff!important;cursor:pointer;display:inline-block;font-weight:400;height:2.85em;line-height:2.8em;padding:0 2em;text-align:center;text-decoration:none;white-space:nowrap}
button:hover{background-color:#3A76B0}

.search-bar{position:absolute;top:105px;right:20px;z-index:9999;width:600px}
.search-bar-inner{display:flex;gap:0;align-items:stretch}
.search-bar input[type="text"]{flex:1;height:2.75em;min-height:0;margin:0;padding:0 1em;font-size:1em;line-height:1;border:2px solid #ddd;border-right:none;border-radius:4px 0 0 4px;outline:none;font-family:inherit;box-sizing:border-box}
.search-bar input[type="text"]:focus{border-color:#2D6296;box-shadow:none}
.search-bar button{height:2.75em;min-height:0;margin:0;padding:0 1.4em;font-size:1em;line-height:1;background:#2D6296;color:#fff;border:2px solid #2D6296;border-radius:0 4px 4px 0;cursor:pointer;font-family:inherit;box-sizing:border-box;display:flex;align-items:center;justify-content:center}
.search-bar button:hover{background:#24507A;border-color:#24507A}
.search-autocomplete{background:#fff;border:2px solid #ddd;border-top:none;border-radius:0 0 4px 4px;max-height:300px;overflow-y:auto;display:none;box-shadow:0 4px 12px rgba(0,0,0,.15)}
.search-autocomplete .ac-item{padding:.5em 1em;cursor:pointer;font-size:.9em;border-bottom:1px solid #eee;display:flex;justify-content:space-between;align-items:center}
.search-autocomplete .ac-item:last-child{border-bottom:none}
.search-autocomplete .ac-item:hover,.search-autocomplete .ac-item.ac-active{background:#EEF4FA}
.search-autocomplete .ac-id{color:#999;font-size:.85em;margin-right:.5em}
.search-autocomplete .ac-sample{flex:1}
.search-autocomplete .ac-client{color:#777;font-size:.85em;margin-left:1em;text-align:right}
.search-info{text-align:center;margin-bottom:1em;color:#666;font-size:.95em}
.search-info a{margin-left:.5em;cursor:pointer}

/* 列表加载更多 */
.load-more-wrap{text-align:center;padding:1.5em 0}
.load-more-wrap button{background:#666}
.load-more-wrap button:hover{background:#555}

@media screen and (max-width:1680px){.container{width:1200px}body,input,button{font-size:13pt}}
@media screen and (max-width:1400px){
  .search-bar{position:static;width:auto;margin:.8em 1em 0}
  .search-bar-inner{width:100%}
  .search-autocomplete{max-height:200px}
  .search-autocomplete .ac-client{display:none}
}
@media screen and (max-width:1280px){.container{width:960px}}
@media screen and (max-width:980px){
  body,input,button{font-size:12pt}
  #header{display:none}
  .container{width:90%}
  header.major{margin-bottom:2em}
  header.major h2{font-size:2em}
  header.major p{padding:1em 1em 0 1em}
  .float-right{float:none;display:block;margin-top:.25em}
  .tiny{font-size:.75em}
  .search-bar{margin:0 0 1em 0}
  .wrapper{padding:4em 0 2em}
}
@media screen and (max-width:480px){html,body{min-width:320px}}
