/* ============================================================
   CARD-NAME SEARCH (search.js)
   ------------------------------------------------------------
   A search box in the topbar (every page) with an autocomplete
   menu, plus a full-screen results overlay listing every printing
   of the chosen card. Printing tiles reuse .card-tile (card-tile.css)
   and the zoom reuses .card-lightbox, so only the chrome lives here.
   Layering: menu + overlay at --z-overlay, the zoom at --z-lightbox.
   ============================================================ */

/* Visually-hidden but screen-reader-available. Used by search.js for its polite
   live region (status announcements). No global .sr-only exists, so it lives here. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Search box in the topbar --- */
.mtg-search {
  position: relative;
  margin-left: auto;            /* sit at the right edge of the topbar wrap */
  display: flex;
  align-items: center;
  flex: 0 1 320px;
  min-width: 0;
}
.mtg-search__input {
  width: 100%;
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: var(--tracking-wide);
  color: var(--bone-800);
  background: var(--ink-000);
  /* Resting border at --accent-rail (>=3:1 vs ink) so the field meets WCAG 1.4.11;
     focus still reads distinctly via the added gold ring (box-shadow) below. */
  border: 1px solid var(--accent-rail);
  border-radius: 2px;
  padding: 0.5rem 2.4rem 0.5rem 0.7rem;   /* right room for the clear button's visible glyph */
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.mtg-search__input::placeholder { color: var(--bone-500); }
.mtg-search__input:focus {
  border-color: var(--accent-rail);
  box-shadow: 0 0 0 1px var(--accent-rail);
}
/* Drop the native search clear/decoration so it reads as one editorial field.
   type="search" otherwise paints its own clear glyph next to our custom .mtg-search__clear,
   so hide it outright (display:none) rather than just resetting its appearance. */
.mtg-search__input::-webkit-search-decoration { -webkit-appearance: none; }
.mtg-search__input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  display: none;
}

/* Custom clear (x): shown by search.js whenever the field has text.
   The whole 44x44 padding-box is the clickable/focusable target (WCAG 2.5.5), while
   the hover fill is clipped to the smaller content box via background-clip so the
   visible chrome stays compact and tasteful (the larger padding only grows the hit
   area, not the glyph). */
.mtg-search__clear {
  position: absolute;
  top: 50%;
  right: 2px;
  transform: translateY(-50%);
  display: none;
  place-items: center;
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  padding: 11px;
  background: transparent;
  background-clip: content-box;
  border: 0;
  border-radius: 11px;
  color: var(--bone-500);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.12s ease, background-color 0.12s ease;
}
.mtg-search__clear.is-visible { display: grid; }
.mtg-search__clear:hover { color: var(--bone-900); background: var(--ink-150); }
/* Pull the focus ring in to hug the visible glyph, not the full 44px hit area. */
.mtg-search__clear:focus-visible {
  outline: 1px solid var(--accent-rail);
  outline-offset: -11px;
  color: var(--bone-900);
}

/* --- Autocomplete menu --- */
.mtg-search__menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  left: auto;
  /* At least the full width of the field; can grow a little wider for long card
     names but never past the viewport. */
  min-width: 100%;
  max-width: min(420px, 92vw);
  max-height: 60vh;
  overflow-y: auto;
  background: var(--ink-100);
  /* Border at --accent-rail so the popup edge clears WCAG 1.4.11 (>=3:1). */
  border: 1px solid var(--accent-rail);
  border-radius: 3px;
  box-shadow: 0 16px 40px oklch(0% 0 0 / 0.5);
  z-index: calc(var(--z-overlay) + 5);
  display: none;
}
.mtg-search__menu.is-open { display: block; }
.mtg-search__opt {
  display: flex;
  align-items: center;
  min-height: 40px;            /* roomier rows than the old ~28px */
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule-soft);
  color: var(--bone-800);
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  line-height: 1.3;
  padding: 0.6rem 0.85rem;
  cursor: pointer;
  transition: background-color 0.1s ease, color 0.1s ease;
}
.mtg-search__opt:last-child { border-bottom: 0; }
.mtg-search__opt:hover,
.mtg-search__opt.is-active {
  background: var(--accent-wash);
  color: var(--bone-900);
}
/* Non-interactive "no results" row: muted + italic, no hover, not an option.
   --bone-700 (not -500) so the text clears WCAG 1.4.3 (>=4.5:1) on the ink-100 menu. */
.mtg-search__msg {
  display: block;
  width: 100%;
  padding: 0.6rem 0.85rem;
  color: var(--bone-700);
  font-family: var(--font-body);
  font-size: var(--fs-meta);
  font-style: italic;
  line-height: 1.3;
}

/* --- Results overlay --- */
.mtg-find {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(0.5rem, 4vh, 3rem) clamp(0.5rem, 4vw, 2rem);
  background: oklch(8% 0.008 95 / 0.78);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mtg-find.is-open { display: flex; }
html.mtg-find-lock { overflow: hidden; }

.mtg-find__panel {
  width: min(1100px, 100%);
  max-height: calc(100vh - 2 * clamp(0.5rem, 4vh, 3rem));
  display: flex;
  flex-direction: column;
  background: var(--ink-050);
  border: 1px solid var(--rule-strong);
  border-radius: 4px;
  box-shadow: 0 30px 80px oklch(0% 0 0 / 0.6);
}
.mtg-find__head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-md) var(--space-sm);
  background: var(--ink-050);
  border-bottom: 1px solid var(--rule-medium);
  border-radius: 4px 4px 0 0;
}
.mtg-find__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-display-bold, 700);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--bone-900);
}
.mtg-find__count {
  margin: var(--space-3xs) 0 0;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--accent);
}
/* 44px square hit area on every viewport (WCAG 2.5.5); the x glyph stays tasteful
   via the smaller font-size, padding is what supplies the comfortable target. */
.mtg-find__close {
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: var(--ink-100);
  border: 1px solid var(--rule-medium);
  border-radius: 3px;
  color: var(--bone-800);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.12s ease, border-color 0.12s ease;
}
.mtg-find__close:hover { color: var(--bone-900); border-color: var(--accent-rail); }

/* In-overlay "search another card" field, mounted inside .mtg-find__head between the
   title and the close button. It carries the .mtg-search class too, so it inherits the
   topbar field + autocomplete-menu styling and the menu's position:relative anchor;
   here we only size and place it for the header. Its menu drops below the sticky head. */
.mtg-find__search {
  flex: 1 1 240px;
  min-width: 0;
  max-width: 360px;
  align-self: center;
  margin-left: auto;          /* hug toward the close button; title keeps its own size */
}
.mtg-find__search .mtg-search__menu {
  /* The menu must clear the sticky header's stacking context and the panel padding. */
  z-index: calc(var(--z-overlay) + 6);
  max-width: min(360px, 80vw);
}
/* WCAG 2.5.5: on touch (coarse pointer) grow EVERY .mtg-search field to a 44px target
   with matching vertical padding - the topbar search and the in-overlay "search another
   card" both (the close + clear glyphs are already 44px). Desktop (fine pointer) keeps
   the compact editorial height from the base .mtg-search__input rule. The base rule's
   left/right padding survives (only the vertical padding is overridden) so the right
   clear-glyph lane is preserved. */
@media (pointer: coarse) {
  .mtg-search__input {
    /* >=16px so iOS Safari does not auto-zoom into the field on focus (and never
       zoom back out), which left the page magnified and shifted toward the topbar
       - the "mobile is off-centered, have to pinch out" report. The box width is
       set by .mtg-search flex-basis, not font-size, so this does not widen the
       field; min-height below keeps the taller text vertically centered. This is
       the single source of truth for the field's touch font-size - the
       narrow-screen block below must NOT re-shrink it. */
    font-size: 16px;
    min-height: 44px;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }
}
@media (max-width: 560px) {
  /* Stack the in-overlay search under the title row so it gets full width on phones. */
  .mtg-find__head { flex-wrap: wrap; }
  .mtg-find__search {
    order: 3;
    flex-basis: 100%;
    max-width: none;
    margin-left: 0;
  }
  .mtg-find__search .mtg-search__menu { max-width: min(360px, 92vw); }
}

.mtg-find__body {
  overflow-y: auto;
  padding: var(--space-md);
}
.mtg-find__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-xs);
}

/* Overlay tile meta vs price: at narrow widths the printing tile (a 1fr/auto grid
   from card-tile.css) can let a long set name and the nowrap price crowd each other.
   Inside the overlay we keep the set-name ellipsized to a single line (card-tile.css
   relaxes it to white-space:normal under 640px) and guarantee the price its own
   column with a real gap, so metadata and the TCG price never overlap. */
.mtg-find__grid .card-tile__name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mtg-find__grid .card-tile__meta {
  min-width: 0;          /* let the meta column actually shrink so ellipsis can engage */
}
.mtg-find__grid .card-tile__price {
  padding-left: var(--space-2xs);   /* reserved gutter between metadata and the price */
}

/* The zoom for a printing image rides above the overlay. */
#mtg-find-lightbox { z-index: var(--z-lightbox); }

/* --- Narrow screens: keep the search usable next to the wordmark --- */
@media (max-width: 640px) {
  /* Match the year page's 2-up tile grid (card-tile.css) so a long printing list
     is not one tall single column on phones. */
  .mtg-find__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2xs);
  }
  .mtg-find__body { padding: var(--space-sm); }
  /* (Close button is already a 44px target at every width; see base rule.) */
}
@media (max-width: 560px) {
  .mtg-search { flex-basis: 210px; }
  .mtg-search__input {
    /* No font-size here on purpose: on touch the field is pinned to 16px by the
       (pointer: coarse) rule above so iOS Safari does not auto-zoom on focus.
       Re-adding a sub-16px size here would reintroduce that bug. This block only
       handles the compact narrow-screen spacing. */
    letter-spacing: var(--tracking-normal);
    /* A touch more left room so the text/placeholder is not pinched against the edge
       once the field narrows (right padding still reserves the clear-glyph lane). */
    padding-left: 0.85rem;
  }
  .mtg-find__title { font-size: var(--fs-display, 1.75rem); }
}
@media (max-width: 380px) {
  /* Keep a comfortable minimum so the field never looks crushed at ~390px and below. */
  .mtg-search { flex-basis: 168px; }
}