/* ─────────────────────────────────────────────────────────────────────────────
   search.css — the ONE search-bar skin for the whole site (option B, "angled plate").

   Why a shared file: the site had 40 search bars across 30 pages under 14 different
   wrapper class names, each with its own hand-rolled skin. They had already drifted.
   Everything below maps those names onto one look, so a future change is one edit here.

   The recipe is the house angled button: the plate is a ::before behind the field, skewed
   -12deg, so the text and the caret stay upright and no markup changes.

   Five pages styled the <input> ITSELF rather than a wrapper, and an input cannot carry a
   ::before — search.js wraps those at load into .sb-wrap, which this file skins the same way.
   ───────────────────────────────────────────────────────────────────────────── */

.search,
.cat-search-wrap,
.cb-searchbar,
.cb-listsearch,
.ctrl-search,
.bf-search,
.search-wrap,
.searchwrap,
.ev-search,
.link-search,
.sm-search,
.pick-search-wrap,
.gsearch,
.sb-wrap {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px 10px 16px;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.search::before,
.cat-search-wrap::before,
.cb-searchbar::before,
.cb-listsearch::before,
.ctrl-search::before,
.bf-search::before,
.search-wrap::before,
.searchwrap::before,
.ev-search::before,
.link-search::before,
.sm-search::before,
.pick-search-wrap::before,
.gsearch::before,
.sb-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: skewX(-12deg);
  border-radius: 4px;
  background: linear-gradient(180deg, #2b3040 0%, #1a1e28 55%, #0d1017 100%);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 2px 7px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .06);
  transition: border-color .15s, filter .15s;
}

.search:focus-within::before,
.cat-search-wrap:focus-within::before,
.cb-searchbar:focus-within::before,
.cb-listsearch:focus-within::before,
.ctrl-search:focus-within::before,
.bf-search:focus-within::before,
.search-wrap:focus-within::before,
.searchwrap:focus-within::before,
.ev-search:focus-within::before,
.link-search:focus-within::before,
.sm-search:focus-within::before,
.pick-search-wrap:focus-within::before,
.gsearch:focus-within::before,
.sb-wrap:focus-within::before {
  border-color: var(--gold, var(--acc,#FFD84A));
  filter: brightness(1.08);
}

/* the field itself carries no skin of its own any more */
.search > input,
.cat-search-wrap > input,
.cb-searchbar > input,
.cb-listsearch > input,
.ctrl-search > input,
.bf-search > input,
.search-wrap > input,
.searchwrap > input,
.ev-search > input,
.link-search > input,
.sm-search > input,
.pick-search-wrap > input,
.gsearch > input,
.sb-wrap > input {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  outline: none;
  box-shadow: none;
  padding: 0;
  text-align: left;
  color: var(--text, #EDE8D5);
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: .95rem;
}

.search > input::placeholder,
.cat-search-wrap > input::placeholder,
.cb-searchbar > input::placeholder,
.cb-listsearch > input::placeholder,
.ctrl-search > input::placeholder,
.bf-search > input::placeholder,
.search-wrap > input::placeholder,
.searchwrap > input::placeholder,
.ev-search > input::placeholder,
.link-search > input::placeholder,
.sm-search > input::placeholder,
.pick-search-wrap > input::placeholder,
.gsearch > input::placeholder,
.sb-wrap > input::placeholder {
  color: var(--text-dim, #7A7668);
}

/* two magnifiers is one too many */
.search input::-webkit-search-cancel-button,
.cat-search-wrap input::-webkit-search-cancel-button,
.cb-searchbar input::-webkit-search-cancel-button,
.ctrl-search input::-webkit-search-cancel-button,
.bf-search input::-webkit-search-cancel-button,
.search-wrap input::-webkit-search-cancel-button,
.searchwrap input::-webkit-search-cancel-button,
.ev-search input::-webkit-search-cancel-button,
.link-search input::-webkit-search-cancel-button,
.sm-search input::-webkit-search-cancel-button,
.gsearch input::-webkit-search-cancel-button,
.sb-wrap input::-webkit-search-cancel-button {
  display: none;
}

/* the clear always sits at the END of the bar, inside it */
.sb-x {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .06);
  color: var(--text-dim, #7A7668);
  cursor: pointer;
  font-size: .62rem;
  line-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: all .15s;
}
.sb-x:hover { background: #E8503A; border-color: #E8503A; color: #fff; }
.sb-x[hidden] { display: none; }

/* the leading magnifier, added by search.js where a page had none */
.sb-ci { color: var(--text-dim, #7A7668); font-size: .9rem; flex: 0 0 auto; line-height: 1; }

/* ── THE MAGNIFIER ────────────────────────────────────────────────────────────
   An ::after on the WRAP, so this reaches every bar on the site and no page is edited --
   which is the whole reason this file exists. `::before` is already the angled plate, so
   `::after` is the free one, and the wrap is a flex row so `order` decides which side.

   IT IS AN SVG THROUGH A MASK, NOT A CHARACTER. The two obvious glyphs both fail:
   U+26B2 is an astronomical symbol that merely LOOKS like a magnifier and is missing from
   many fonts, and U+1F50D is an EMOJI -- Windows paints it in full colour, so it could
   never take the bar's own colour or turn gold on focus. A mask fed by `currentColor`
   draws identically everywhere and inherits the focus change with no second declaration.

   RIGHT-HAND SIDE (order:1), and the wrap carries the padding that keeps it clear of a
   page's own clear button. */
.search::after,
.cat-search-wrap::after,
.cb-searchbar::after,
.cb-listsearch::after,
.ctrl-search::after,
.bf-search::after,
.search-wrap::after,
.searchwrap::after,
.ev-search::after,
.link-search::after,
.sm-search::after,
.pick-search-wrap::after,
.gsearch::after,
.sb-wrap::after {
  content: '';
  order: 1;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-left: 9px;
  background: currentColor;
  color: var(--text-dim, #7A7668);
  -webkit-mask: var(--sb-ic) center/contain no-repeat;
          mask: var(--sb-ic) center/contain no-repeat;
  transition: color .15s;
}
.search:focus-within::after,
.cat-search-wrap:focus-within::after,
.cb-searchbar:focus-within::after,
.cb-listsearch:focus-within::after,
.ctrl-search:focus-within::after,
.bf-search:focus-within::after,
.search-wrap:focus-within::after,
.searchwrap:focus-within::after,
.ev-search:focus-within::after,
.link-search:focus-within::after,
.sm-search:focus-within::after,
.pick-search-wrap:focus-within::after,
.gsearch:focus-within::after,
.sb-wrap:focus-within::after {
  color: var(--gold, var(--acc,#FFD84A));
}
/* the ✕ a page ships is absolutely placed in the right-hand corner, so the bar reserves
   room for BOTH rather than letting them stack */
.search,
.cat-search-wrap,
.cb-searchbar,
.cb-listsearch,
.ctrl-search,
.bf-search,
.search-wrap,
.searchwrap,
.ev-search,
.link-search,
.sm-search,
.pick-search-wrap,
.gsearch,
.sb-wrap {
  --sb-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round'%3E%3Ccircle cx='10' cy='10' r='6'/%3E%3Cpath d='M14.6 14.6 L21 21'/%3E%3C/svg%3E");
  padding-right: 34px;
}

/* ONE MAGNIFIER, NOT TWO. Five pages hand-rolled their own before this file existed --
   `<span class="ci">&#9906;</span>` on dokkan_tracker, timeline and both calendars, and
   `.bf-si` on detail.html -- all of them on the LEFT. The shared icon above is the single
   source now, so those are hidden here rather than cut out of five pages: this file's whole
   promise is that a change to the search bar is one edit and no page is touched.
   (U+26B2 is also not a magnifier -- see the note on the icon above.) */
.search .ci,
.search .bf-si,
.cat-search-wrap .ci,
.cat-search-wrap .bf-si,
.cb-searchbar .ci,
.cb-searchbar .bf-si,
.cb-listsearch .ci,
.cb-listsearch .bf-si,
.ctrl-search .ci,
.ctrl-search .bf-si,
.bf-search .ci,
.bf-search .bf-si,
.search-wrap .ci,
.search-wrap .bf-si,
.searchwrap .ci,
.searchwrap .bf-si,
.ev-search .ci,
.ev-search .bf-si,
.link-search .ci,
.link-search .bf-si,
.sm-search .ci,
.sm-search .bf-si,
.pick-search-wrap .ci,
.pick-search-wrap .bf-si,
.gsearch .ci,
.gsearch .bf-si,
.sb-wrap .ci,
.sb-wrap .bf-si {
  display: none;
}