/* On-site search: header button + overlay. Loaded on every page after the main styles. */

/* --- header button (sits with the Discord / YouTube icons) --- */
nav.primary .nav-search{
  display:inline-flex; align-items:center; justify-content:center;
  background:none; border:0; border-bottom:2px solid transparent;
  padding:4px 2px; margin:0; cursor:pointer; font:inherit;
  color: var(--text-muted, #7C8873);
  transition: color .15s ease;
}
nav.primary .nav-search:hover,
nav.primary .nav-search:focus-visible,
nav.primary .nav-search[aria-expanded="true"]{ color: var(--amber, #FFB020); }
nav.primary .nav-search:focus-visible{ outline: 2px solid var(--amber, #FFB020); outline-offset: 3px; }
nav.primary .nav-search svg{ display:block; }

/* --- overlay --- */
html.ss-open{ overflow:hidden; }
.ss-overlay{
  position:fixed; inset:0; z-index:1000;
  background: rgba(6,7,3,0.82);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  display:flex; justify-content:center; align-items:flex-start;
  padding: 11vh 16px 24px; overflow-y:auto;
}
.ss-overlay[hidden]{ display:none; }
.ss-panel{
  width:100%; max-width: 640px;
  background: var(--bg-panel, #0C0F07);
  border: 1px solid var(--line-bright, #435423);
  box-shadow: 0 0 60px rgba(255,176,32,0.14), 0 24px 60px rgba(0,0,0,0.6);
  font-family: var(--body, "IBM Plex Sans", system-ui, sans-serif);
}
.ss-form{
  display:flex; align-items:center; gap:12px;
  padding: 14px 16px; border-bottom: 1px solid var(--line, #232B14);
  color: var(--text-muted, #7C8873);
}
.ss-icon{ flex:none; }
.ss-input{
  flex:1; min-width:0; background:none; border:0; outline:0;
  color: var(--text, #ECEFE1); font: inherit; font-size: 1.05rem;
  padding: 6px 0; -webkit-appearance:none; appearance:none;
}
.ss-input::placeholder{ color: var(--text-muted, #7C8873); opacity:.8; }
.ss-input::-webkit-search-cancel-button{ -webkit-appearance:none; }
.ss-close{
  flex:none; background:none; cursor:pointer;
  color: var(--text-muted, #7C8873); border: 1px solid var(--line-bright, #435423);
  font-family: var(--mono, ui-monospace, monospace); font-size: .7rem; letter-spacing:.06em;
  padding: 4px 8px; text-transform: uppercase;
}
.ss-close:hover, .ss-close:focus-visible{ color: var(--amber, #FFB020); border-color: var(--amber, #FFB020); outline:none; }
.ss-status{
  margin:0; padding: 8px 18px 0; max-width:none; min-height: 1.6em;
  font-family: var(--mono, ui-monospace, monospace); font-size:.72rem; letter-spacing:.06em;
  text-transform: uppercase; color: var(--text-muted, #7C8873);
}
.ss-list{ list-style:none; margin:0; padding: 4px 8px 12px; max-height: 60vh; overflow-y:auto; }
.ss-label, .ss-empty{
  padding: 10px 10px; color: var(--text-muted, #7C8873); font-size:.9rem;
}
.ss-label{ font-family: var(--mono, ui-monospace, monospace); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; }
.ss-item{
  display:block; padding: 12px 12px; border-left: 2px solid transparent; color: var(--text, #ECEFE1);
  text-decoration:none;
}
.ss-item:hover, .ss-item:focus-visible{
  background: rgba(255,176,32,0.07); border-left-color: var(--amber, #FFB020); outline:none;
}
.ss-top{ display:flex; align-items:center; gap:10px; margin-bottom: 3px; }
.ss-title{ font-family: var(--display, "Rajdhani", sans-serif); font-weight:700; font-size:1.15rem; }
.ss-kind{
  font-family: var(--mono, ui-monospace, monospace); font-size:.62rem; letter-spacing:.08em; text-transform:uppercase;
  color: var(--moss, #8FCB63); border: 1px solid var(--moss, #8FCB63); padding: 1px 6px;
}
.ss-snip{ display:block; color: var(--text-muted, #7C8873); font-size:.9rem; line-height:1.45; }
.ss-url{ display:block; margin-top:3px; font-family: var(--mono, ui-monospace, monospace); font-size:.7rem; color: var(--line-bright, #435423); }
.ss-item:hover .ss-url, .ss-item:focus-visible .ss-url{ color: var(--amber, #FFB020); }
.ss-panel mark{ background: rgba(255,176,32,0.25); color: var(--amber, #FFB020); padding: 0 1px; }

@media (max-width: 520px){
  .ss-overlay{ padding-top: 8vh; }
  .ss-list{ max-height: 66vh; }
  /* header: a third icon must still fit on small phones */
  nav.primary{ gap: 9px; }
  nav.primary a{ font-size: 0.68rem; }
  nav.primary .nav-search svg{ width: 18px; height: 18px; }
  nav.primary .nav-search{ padding: 4px 0; }
}
@media (max-width: 360px){
  nav.primary{ gap: 7px; }
  nav.primary a{ font-size: 0.6rem; }
  nav.primary .nav-search svg{ width: 16px; height: 16px; }
}
@media (prefers-reduced-motion: reduce){
  nav.primary .nav-search{ transition:none; }
  .ss-overlay{ -webkit-backdrop-filter:none; backdrop-filter:none; }
}

/* bigger tap area for the small header icons without changing layout */
nav.primary .nav-search, nav.primary a.nav-icon{ position: relative; }
nav.primary .nav-search::after, nav.primary a.nav-icon::after{ content:""; position:absolute; top:-12px; bottom:-12px; left:-5px; right:-5px; }