/*
 * Page-specific styles for the search FORM surface. The shared chrome classes
 * (.paper, .bar, .gap, .footer, the :root color vars) live in forum.css and are
 * NOT redefined here. Design adapted from docs/forum-theme/samples/search.html's
 * facet-card look, applied to the real legacy form fields.
 */

.sform{padding:14px}

/* simple search — big keyword box + go + advanced toggle, always visible */
.ssimple{display:flex; align-items:center; gap:10px}
.skey{flex:1; min-width:0; box-sizing:border-box; border:1px solid #b9c6dd; border-radius:6px;
     padding:9px 12px; font-family:inherit; font-size:15px; background:#fff}
.skey:focus{outline:none; border-color:#7ba0d0; box-shadow:0 0 0 3px rgba(123,160,208,.25)}
.ssimple .btn{flex:none; padding:9px 26px; font-size:14px}
.advtoggle{flex:none; font-size:12px; color:#33506f; white-space:nowrap; cursor:pointer}
.advtoggle:hover{text-decoration:none; color:var(--linkhi)}
.advtoggle i{margin-right:3px; font-size:11px}
.skeyhint{margin:8px 2px 0; font-size:11px; color:var(--muted); line-height:1.6}

/* advanced filter panel — revealed by the toggle (or auto-open when active) */
.sadv{margin-top:14px; padding-top:14px; border-top:1px dashed var(--rule)}
.sadv[hidden]{display:none}

.srow{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.srow + .srow{margin-top:14px}
.sfield{border:1px solid var(--frame); border-radius:6px; overflow:hidden; padding:10px 12px; background:#fff}
.sfield label{display:block; font-weight:bold; color:var(--cat-text); font-size:12px; margin:8px 0 4px}
.sfield label:first-child{margin-top:0}
.sfield input[type=text],.sfield select{box-sizing:border-box; width:100%; border:1px solid #b9c6dd; border-radius:5px;
     padding:6px 10px; font-family:inherit; font-size:13px; background:#fff}
.sfield select{background:linear-gradient(#fff,#f3f7fc)}
.sfield input[type=text]:focus,.sfield select:focus{outline:none; border-color:#7ba0d0; box-shadow:0 0 0 3px rgba(123,160,208,.25)}
.sfield .hint{margin-top:6px; font-size:11px; color:var(--muted); line-height:1.6}

.opts{display:flex; flex-wrap:wrap; align-items:center; gap:8px 18px; margin:6px 0 2px}
.sfield .opt{display:inline-flex; align-items:center; gap:6px; font-weight:normal; color:#33506f; font-size:12px; margin:0; line-height:14px; cursor:pointer}
/* fix the control/label drift: fixed box + line-height:1 so the CJK label sits
   on the control's midline instead of riding high. */
.sfield .opt input[type=radio],.sfield .opt input[type=checkbox]{appearance:auto; width:14px; height:14px; margin:0; flex:none; accent-color:#5C84BE}

/* year range — two compact selects with an en-dash between */
.yrange{display:flex; align-items:center; gap:8px}
.yrange select{flex:1; min-width:0}
.ydash{color:var(--muted)}
.sfield.wide{grid-column:1 / -1}

.ssubmit{text-align:center; margin-top:16px}
.btn{display:inline-block; color:#003366; font-weight:bold; font-size:13px; text-decoration:none;
     padding:7px 28px; border:1px solid #6699cc; border-radius:4px; line-height:1.4; cursor:pointer;
     background:linear-gradient(to bottom,#fbfdff,#dceafd); box-shadow:inset 0 1px 0 #fff}
.btn:hover{background:linear-gradient(to bottom,#fff,#e8f1fe); text-decoration:none}

/* native (Typesense) result list */
.sresults{padding:4px 0}
.sresult{padding:9px 14px; border-bottom:1px solid var(--rule)}
.sresult:last-child{border-bottom:0}
.sresult.gated{background:#fbfaf5}
.sresult .st{font-size:14px; line-height:1.5}
.sresult .slink{color:#003366; font-weight:bold}
.sresult .ssnip{margin:3px 0; font-size:12px; color:#445; line-height:1.6}
.sresult .ssnip mark{background:#fff3a8; color:inherit; padding:0 1px}
.sresult .smeta{font-size:11px; color:var(--muted)}
.sresult .sforum{color:#13386b}
.sbadge{display:inline-block; font-size:11px; font-weight:bold; padding:0 5px; border-radius:2px; margin-right:4px; vertical-align:1px}
.sbadge.sticky{background:#e6f0ff; color:#13386b; border:1px solid #b8cdec}
.sbadge.digest{background:#fff0e0; color:#9a5b00; border:1px solid #e3c79a}
.sbadge.lock{background:#f3eefe; color:#5a3fb0; border:1px solid #cfc2ee}
.spager{display:flex; gap:14px; justify-content:center; padding:12px; font-size:12px}
.bar .r{margin-left:auto; font-weight:normal; font-size:11px; color:#e7f0fb}

/* ===== mobile: stack the search form fields ===== */
@media (max-width:700px){
  .sform{padding:10px}
  .srow{grid-template-columns:1fr}
  .opts{flex-wrap:wrap; gap:8px 16px}
  .sresult .ssnip{font-size:12px}
  .bar .r{font-size:10px}
}