/* Study search box — shared by study/index.html and every section index page. */

.ss-root{
  position:relative;
  margin-bottom:32px;
}
.ss-root.ss-compact{
  margin-bottom:28px;
  max-width:420px;
}
.ss-label{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.ss-box{
  position:relative; display:flex; align-items:center;
  border:1px solid var(--panel-border); background:var(--panel); border-radius:8px;
  padding:0 14px; transition:border-color .15s;
}
.ss-box:focus-within{ border-color:var(--accent); }
.ss-icon{ flex-shrink:0; color:var(--text-dim); margin-right:10px; }
.ss-input{
  flex:1; min-width:0; background:transparent; border:none; outline:none;
  color:var(--text); font-family:var(--font-body); font-size:15px; padding:14px 0;
}
.ss-root.ss-compact .ss-input{ font-size:14px; padding:11px 0; }
.ss-input::placeholder{ color:var(--text-dim); }
.ss-kbd{
  flex-shrink:0; font-family:var(--font-mono); font-size:11px; color:var(--text-dim);
  border:1px solid var(--panel-border); border-radius:4px; padding:2px 6px; margin-left:8px;
  white-space:nowrap;
}
@media (max-width:520px){ .ss-kbd{ display:none; } }
.ss-clear{
  flex-shrink:0; background:none; border:none; color:var(--text-dim); cursor:pointer;
  font-size:16px; line-height:1; padding:4px 2px; margin-left:6px; display:none;
}
.ss-clear:hover{ color:var(--text); }
.ss-root.ss-has-query .ss-clear{ display:block; }
.ss-root.ss-has-query .ss-kbd{ display:none; }

.ss-panel{
  position:absolute; left:0; right:0; top:calc(100% + 8px); z-index:30;
  background:var(--panel); border:1px solid var(--panel-border); border-radius:8px;
  box-shadow:0 12px 32px rgba(0,0,0,.35);
  max-height:70vh; overflow-y:auto;
}
:root[data-theme="light"] .ss-panel{ box-shadow:0 12px 28px rgba(20,20,20,.12); }
.ss-panel[hidden]{ display:none; }

.ss-state{
  padding:18px 16px; color:var(--text-dim); font-family:var(--font-mono); font-size:13px;
}

.ss-option{
  display:block; padding:12px 16px 12px 13px; border-bottom:1px solid var(--panel-border);
  border-left:3px solid transparent; cursor:pointer;
}
.ss-option:last-child{ border-bottom:none; }
.ss-option:hover, .ss-option.ss-active{ background:var(--bg); border-left-color:var(--accent); }
.ss-option-top{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:4px; }
.ss-option-title{
  font-family:var(--font-display); font-size:15px; font-weight:600; color:var(--text);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ss-option-title mark{ background:none; color:var(--accent); font-weight:700; }
.ss-badges{ flex-shrink:0; display:flex; align-items:center; gap:6px; }
.ss-badge{
  font-family:var(--font-mono); font-size:10.5px; color:var(--text-dim);
  border:1px solid var(--panel-border); border-radius:4px; padding:2px 6px; white-space:nowrap;
}
.ss-badge-diff{ border-color:transparent; }
.ss-badge-diff.easy{ color:var(--easy,#4ADE80); }
.ss-badge-diff.medium{ color:var(--medium,#F0B429); }
.ss-badge-diff.hard{ color:var(--hard,#F0554A); }
.ss-option-desc{
  color:var(--text-muted); font-size:13px; line-height:1.5;
  overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
}

@media (max-width:400px){
  .ss-option-title{ font-size:14px; }
  .ss-option-desc{ font-size:12.5px; }
}

/* iPhone Safari zooms into any text field under 16px when it's focused; keep the search box at 16px on phones. */
/* !important: every variant (.ss-compact on section pages, .sh-hero on the study home) must lose to this on phones. */
@media (max-width: 768px){ .ss-input{ font-size:16px !important; } }