/* Navbar tools (search + theme) and the search panel under the header */
.header-tools {
  order: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.brand { order: 3; }

.tool-btn {
  width: 43px;
  height: 43px;
  display: grid;
  place-items: center;
  padding: 0;
  color: #d1dced;
  border: 1px solid #ffffff28;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.tool-btn svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tool-btn:hover,
.tool-btn[aria-expanded="true"] {
  color: var(--cyan);
  border-color: var(--cyan);
}
.tool-btn:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

/* dark mode shows the sun (switch to light), light mode shows the moon */
.tool-btn .icon-moon { display: none; }
[data-theme="light"] .tool-btn .icon-sun { display: none; }
[data-theme="light"] .tool-btn .icon-moon { display: block; }

/* ---------- panel ---------- */
.search-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  left: 0;
  width: min(1120px, calc(100% - 40px));
  margin-inline: auto;
  padding: 14px;
  direction: rtl;
  border: 1px solid rgba(75, 169, 255, .27);
  border-radius: 15px;
  background: rgba(5, 18, 37, .97);
  box-shadow: 0 18px 38px rgba(0, 0, 0, .35);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.search-panel[hidden] { display: none; }
.search-panel:not([hidden]) { animation: search-in .22s ease; }
@keyframes search-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}

.search-form {
  display: flex;
  align-items: center;
  gap: 10px;
}
.search-field {
  position: relative;
  flex: 1;
  min-width: 0;
}
.search-field svg {
  position: absolute;
  top: 50%;
  right: 15px;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
  fill: none;
  stroke: var(--muted);
  stroke-width: 2;
  stroke-linecap: round;
  pointer-events: none;
}
.search-field input {
  width: 100%;
  height: 48px;
  padding: 0 46px 0 16px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 12px;
  color: var(--white);
  background: #0a1423;
  font: inherit;
  font-size: 19px;
  outline: none;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.search-field input::placeholder { color: #77879d; }
.search-field input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(22, 139, 255, .14);
}
.search-field input::-webkit-search-cancel-button { filter: invert(.7); cursor: pointer; }
.search-form .btn { min-height: 48px; flex-shrink: 0; }

/* ---------- results ---------- */
.search-results {
  max-height: min(58vh, 430px);
  margin-top: 12px;
  overflow-y: auto;
  display: grid;
  gap: 8px;
}
.search-results[hidden] { display: none; }
.search-count,
.search-empty {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.8;
}
.search-empty { padding: 6px 4px; }
.search-result {
  display: grid;
  gap: 2px;
  padding: 11px 14px;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 12px;
  background: rgba(255, 255, 255, .025);
  transition: border-color .2s ease, background .2s ease;
}
.search-result:hover,
.search-result.is-active {
  border-color: rgba(22, 139, 255, .5);
  background: rgba(22, 139, 255, .08);
}
.search-result .sr-type {
  justify-self: start;
  padding: 0 10px;
  border: 1px solid rgba(0, 212, 232, .25);
  border-radius: 20px;
  color: var(--cyan);
  background: rgba(0, 212, 232, .06);
  font-size: 14px;
  line-height: 1.7;
}
.search-result strong { color: var(--white); font-size: 19px; line-height: 1.6; }
.search-result small { color: var(--muted); font-size: 15px; line-height: 1.8; }
.search-result mark {
  color: var(--cyan);
  background: transparent;
  font-weight: bold;
}

/* the element a search result points to */
.dt-search-hit { animation: search-hit 2.4s ease; }
@keyframes search-hit {
  0%, 60% { outline: 2px solid var(--cyan); outline-offset: 6px; box-shadow: 0 0 36px rgba(19, 223, 208, .28); }
  100% { outline: 2px solid transparent; outline-offset: 6px; box-shadow: none; }
}

@media (max-width: 1050px) {
  .header-tools { gap: 6px; }
}
@media (max-width: 820px) {
  .header-tools { order: 2; }
  .brand { order: 3; }
  .search-panel { width: calc(100% - 28px); }
}
@media (max-width: 560px) {
  .header-tools { gap: 5px; }
  .tool-btn { width: 37px; height: 37px; border-radius: 9px; }
  .tool-btn svg { width: 18px; height: 18px; }
  .search-panel { width: calc(100% - 20px); padding: 10px; }
  .search-form { flex-wrap: wrap; }
  .search-form .btn { width: 100%; min-height: 44px; }
  .search-field input { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .search-panel:not([hidden]), .dt-search-hit { animation: none; }
}

/* the navbar "start" button moves into the dropdown menu on very small phones so the logo + tools always fit */
.nav-cta-mobile { display: none; }
@media (max-width: 480px) {
  .nav-cta { display: none; }
  .nav-cta-mobile { display: inline-flex; margin-top: 8px; min-height: 42px; }
}