/* ============================================================================
   NookMarker — Web search bar + Search-engine settings  (self-contained module)
   ----------------------------------------------------------------------------
   Two surfaces, both driven by src/search/search.js:
     1. .web-search  — the address-bar-style search box in the topbar, sitting at
        the RIGHT end of the Speed-Dial area, just before the right .header-sep.
     2. .se-*        — the default-engine dropdown + custom-engine rows in the
        "Search" settings tab.
   Uses the shared OKLCH tokens. Own ?v= cache-bust (bump on edit — gotcha 14).
   ========================================================================== */

/* ---------- Topbar search bar ---------- */
/* Keep the Speed Dial able to shrink/scroll so the bar can pin to the right.
   margin-left:auto on the bar eats the free space → bar always sits far-right. */
.header-dial-wrap #speed-dial {
  flex: 0 1 auto;
  min-width: 0;
  flex-wrap: nowrap;   /* beats .speed-dial{flex-wrap:wrap} (center.css loads later) → single row, scrolls */
}

.web-search {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  margin-left: auto;          /* push to the right end of the dial area */
  width: 240px;
  max-width: 240px;
  height: 34px;
  padding: 0 6px 0 8px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  transition: border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}

.web-search:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  background: var(--bg);
}

.web-search-engine {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: var(--r-sm);
  color: var(--faint);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.web-search-engine:hover {
  background: var(--surface-2);
  color: var(--muted);
}

/* flex:none keeps the glyph from being squished by the flex row (without it the
   favicon img rendered ~10px wide). aspect-ratio + the fixed box guarantee a crisp
   square for both the magnifier SVG and the engine favicon <img>. */
.web-search-engine svg {
  flex: none;
  width: 16px;
  height: 16px;
  aspect-ratio: 1 / 1;
}

/* current engine's favicon. min-width:16px is REQUIRED — as a flex item the img's
   default `min-width:auto` (min-content of the replaced image) was capping it to ~10px
   even with width:16px + flex:none. */
.web-search-engine img {
  flex: none;
  width: 16px;
  height: 16px;
  min-width: 16px;
  object-fit: contain;
  border-radius: 3px;
  display: block;
}

/* letter-tile fallback if the favicon fails (markerIconError swaps img→span) */
.web-search-engine .fav-letter {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  min-width: 16px;
  border-radius: 3px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 600;
}

.web-search-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  border: none;
  background: transparent;
  font-size: var(--fs-sm);
  color: var(--ink);
  padding: 0;
}

.web-search-input:focus {
  outline: none;
}

.web-search-input::placeholder {
  color: var(--faint);
}

@media (max-width: 900px) {
  .web-search { width: 200px; }
}

@media (max-width: 760px) {
  .web-search { width: 168px; }
}

/* Mobile: topbar is tight — hide the bar (like the brand tagline). */
@media (max-width: 640px) {
  .web-search { display: none; }
}

/* ---------- "Search" settings tab — inline default-engine dropdown ---------- */
/* Minimal: one inline row "Default search engine" + a small custom dropdown that
   holds the whole engine list (pick / edit / delete) + an "Add search engine" row. */
.se-default-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.se-default-label {
  margin: 0;
}

.se-dd {
  position: relative;
  flex: 0 0 auto;
}

.se-dd-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 150px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg);
  color: var(--ink);
  font-size: var(--fs-base);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.se-dd-trigger:hover {
  border-color: var(--border-strong);
}

.se-dd-trigger[aria-expanded="true"] {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.se-dd-trigger svg {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--muted);
}

#se-dd-current {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.se-dd-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 60;
  min-width: 260px;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: 0 10px 28px rgb(0 0 0 / 0.16);
}

.se-opt {
  display: flex;
  align-items: center;
  gap: 2px;
  border-radius: var(--r-sm);
}

.se-opt.is-default {
  background: var(--accent-soft);
}

.se-opt-pick {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
  padding: 7px 8px;
  border-radius: var(--r-sm);
  text-align: left;
  color: var(--ink);
}

.se-opt-pick:hover {
  background: var(--surface-2);
}

.se-opt.is-default .se-opt-pick:hover {
  background: transparent;
}

.se-opt-check {
  flex: none;
  width: 14px;
  height: 14px;
  color: var(--accent-text);
  display: inline-flex;
}

.se-opt-check svg {
  width: 14px;
  height: 14px;
}

.se-opt-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-base);
}

.se-opt-sc {
  flex: none;
  font-size: var(--fs-xs);
  color: var(--muted);
  font-family: var(--mono);
}

.se-opt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: var(--r-sm);
  color: var(--muted);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.se-opt-btn svg {
  width: 15px;
  height: 15px;
}

.se-opt-btn:hover {
  background: var(--surface-2);
  color: var(--ink);
}

.se-opt-del:hover {
  background: var(--danger-soft);
  color: var(--danger);
}

.se-opt-add {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-top: 2px;
  padding: 9px 8px;
  border-top: 1px solid var(--border);
  color: var(--accent-text);
  font-size: var(--fs-sm);
  font-weight: 500;
}

.se-opt-add svg {
  flex: none;
  width: 16px;
  height: 16px;
}

.se-opt-add:hover {
  background: var(--surface-2);
  border-radius: 0 0 var(--r-sm) var(--r-sm);
}