/*!
 * Search+ 3.0 — instant answers inside the search overlay (CONTRACTS-WAVE3 §1).
 * Companion of assets/js/sp-answers.js.
 *
 * Loaded AFTER search-plus.css (declared dependency) and reuses that file's
 * design tokens (--sp-bg, --sp-fg, --sp-muted, --sp-border, --sp-accent,
 * --sp-accent-soft, --sp-radius), so a theme that re-tints the overlay re-tints
 * the answers with it. Every token is written with a literal fallback, so the
 * cards still look right if only this stylesheet loads.
 *
 * Every selector carries two classes on purpose: the overlay's defensive reset
 * (`.sp-root *` — border: 0, background: none, outline: 0) has one-class
 * specificity, so anything single-class here would lose to it.
 *
 * ICONS are CSS masks, not markup. The JS only ever writes a validated key into
 * a class name, so no SVG — and therefore no attacker-shaped markup — can reach
 * the DOM through the answer payload. Each glyph is declared ONCE, into the
 * --sp-an-m custom property, which the shared .sp-an-i rule feeds to both the
 * prefixed and the unprefixed mask-image (declaring the data URI twice per icon
 * doubled this file). `background-color: currentColor`-style tinting from
 * --sp-accent keeps them theme- and dark-mode-correct; a browser without mask
 * support simply shows no icon, which is why the span is aria-hidden and
 * carries no meaning of its own.
 */

/* ------------------------------------------------------------- container */

.sp-panel .sp-an,
.sp-answers.sp-answers--page {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 0 0 auto;
}

.sp-panel .sp-an {
  max-height: 46vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 10px 12px;
  border-bottom: 1px solid var(--sp-border, #e2e5ea);
  background: var(--sp-bg, #fff);
}

.sp-panel .sp-an[hidden] {
  display: none !important; /* [!] the overlay's [hidden] display contract */
}

/* ------------------------------------------------------------------ card */

.sp-panel .sp-an-card,
.sp-answers .sp-an-card {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  border: 1px solid var(--sp-border, #e2e5ea);
  border-radius: var(--sp-radius, 10px);
  background: var(--sp-accent-soft, rgba(11, 83, 214, .09));
  color: var(--sp-fg, #16181d);
  font-size: 13px;
  line-height: 1.5;
}

.sp-answers.sp-answers--page {
  margin: 0 0 24px;
  font-size: 15px;
}

/* --------------------------------------------------------------- content */

.sp-panel .sp-an-b,
.sp-answers .sp-an-b {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1 1 auto;
}

.sp-panel .sp-an-t,
.sp-answers .sp-an-t {
  font-size: 1.05em;
  font-weight: 600;
  line-height: 1.3;
  color: var(--sp-fg, #16181d);
}

.sp-panel .sp-an-p,
.sp-answers .sp-an-x p {
  margin: 0;
  color: var(--sp-fg, #16181d);
  overflow-wrap: break-word;
}

.sp-panel .sp-an-ul,
.sp-answers .sp-an-x ul,
.sp-answers .sp-an-x ol {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 2px 0;
  padding: 0 0 0 1.1em;
  list-style: disc outside;
}

.sp-panel .sp-an-li,
.sp-answers .sp-an-x li {
  display: list-item;
  list-style: disc outside;
  color: var(--sp-fg, #16181d);
  overflow-wrap: break-word;
}

.sp-answers .sp-an-x strong,
.sp-answers .sp-an-x b {
  font-weight: 600;
}

/* ----------------------------------------------------------------- links */

.sp-panel .sp-an-cta,
.sp-panel .sp-an-lk,
.sp-answers .sp-an-cta,
.sp-answers .sp-an-x a {
  align-self: flex-start;
  margin-top: 2px;
  padding: 6px 2px;
  min-height: 24px;
  color: var(--sp-accent, #0b53d6);
  font-weight: 600;
  text-decoration: underline !important; /* [!] hostile theme link rules */
  text-underline-offset: 2px;
  cursor: pointer;
}

.sp-panel .sp-an-lk {
  font-weight: 400;
}

.sp-panel .sp-an-cta:hover,
.sp-panel .sp-an-lk:hover,
.sp-answers .sp-an-cta:hover {
  text-decoration: none !important; /* [!] same */
}

/* Base rule is plain :focus: a browser that does not know :focus-visible would
   drop a merged selector list whole and, since the overlay reset removes
   `outline`, be left with no focus indicator at all. The second rule withdraws
   the ring from pointer focus wherever :focus-visible IS understood (A11Y-13).
   The ring is inset because .sp-an scrolls and the panel clips (2.4.11). */
.sp-panel .sp-an-cta:focus,
.sp-panel .sp-an-lk:focus,
.sp-answers .sp-an-cta:focus {
  outline: 2px solid transparent;
  outline-offset: -2px;
  border-radius: 4px;
  box-shadow: inset 0 0 0 2px var(--sp-accent, #0b53d6);
}

.sp-panel .sp-an-cta:focus:not(:focus-visible),
.sp-panel .sp-an-lk:focus:not(:focus-visible),
.sp-answers .sp-an-cta:focus:not(:focus-visible) {
  outline: 0;
  box-shadow: none;
}

/* -------------------------------------------------------------- the icon */

.sp-panel .sp-an-i,
.sp-answers .sp-an-i {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  background-color: var(--sp-accent, #0b53d6);
  -webkit-mask-image: var(--sp-an-m);
  mask-image: var(--sp-an-m);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

/* One declaration per glyph: 24×24, stroke-only, black (the mask reads alpha).
   An unknown key leaves --sp-an-m unset, which makes mask-image invalid at
   computed-value time, i.e. no mask and no icon — never a broken box. */

.sp-an-i--truck { --sp-an-m: 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'%3E%3Cpath d='M2 6h11v10H2zM13 9h4l4 4v3h-8z'/%3E%3Ccircle cx='7' cy='18' r='2'/%3E%3Ccircle cx='17' cy='18' r='2'/%3E%3C/svg%3E"); }
.sp-an-i--clock { --sp-an-m: 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'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
.sp-an-i--box { --sp-an-m: 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'%3E%3Cpath d='M3 8l9-5 9 5v8l-9 5-9-5z'/%3E%3Cpath d='M3 8l9 5 9-5M12 13v8'/%3E%3C/svg%3E"); }
.sp-an-i--back { --sp-an-m: 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'%3E%3Cpath d='M9 5L3 11l6 6'/%3E%3Cpath d='M3 11h12a6 6 0 0 1 6 6v3'/%3E%3C/svg%3E"); }
.sp-an-i--refresh { --sp-an-m: 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'%3E%3Cpath d='M20 12a8 8 0 1 1-2.3-5.6'/%3E%3Cpath d='M20 4v5h-5'/%3E%3C/svg%3E"); }
.sp-an-i--card { --sp-an-m: 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'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cpath d='M2 10h20M6 15h4'/%3E%3C/svg%3E"); }
.sp-an-i--coins { --sp-an-m: 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'%3E%3Cellipse cx='12' cy='6' rx='8' ry='3'/%3E%3Cpath d='M4 6v6c0 1.7 3.6 3 8 3s8-1.3 8-3V6'/%3E%3Cpath d='M4 12v6c0 1.7 3.6 3 8 3s8-1.3 8-3v-6'/%3E%3C/svg%3E"); }
.sp-an-i--ruler { --sp-an-m: 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'%3E%3Crect x='2' y='8' width='20' height='8' rx='1'/%3E%3Cpath d='M7 8v4M12 8v4M17 8v4'/%3E%3C/svg%3E"); }
.sp-an-i--shield { --sp-an-m: 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'%3E%3Cpath d='M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E"); }
.sp-an-i--wrench { --sp-an-m: 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'%3E%3Cpath d='M15 3a5 5 0 0 0-4.6 7L3 17.4 5.6 20 13 12.6A5 5 0 0 0 20 8l-3 3-3-3 3-3a5 5 0 0 0-2-2z'/%3E%3C/svg%3E"); }
.sp-an-i--receipt { --sp-an-m: 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'%3E%3Cpath d='M5 2h14v20l-3-2-2 2-2-2-2 2-2-2-3 2z'/%3E%3Cpath d='M9 7h6M9 11h6'/%3E%3C/svg%3E"); }
.sp-an-i--phone { --sp-an-m: 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'%3E%3Cpath d='M6 3h3l2 5-2 1a12 12 0 0 0 5 5l1-2 5 2v3a2 2 0 0 1-2 2A17 17 0 0 1 4 5a2 2 0 0 1 2-2z'/%3E%3C/svg%3E"); }
.sp-an-i--store { --sp-an-m: 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'%3E%3Cpath d='M3 9l1.5-5h15L21 9M4 9v11h16V9'/%3E%3Cpath d='M3 9a3 3 0 0 0 6 0 3 3 0 0 0 6 0 3 3 0 0 0 6 0M9 20v-6h6v6'/%3E%3C/svg%3E"); }
.sp-an-i--mail { --sp-an-m: 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'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E"); }
.sp-an-i--pin { --sp-an-m: 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'%3E%3Cpath d='M12 21s7-6.3 7-11a7 7 0 1 0-14 0c0 4.7 7 11 7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E"); }
.sp-an-i--gift { --sp-an-m: 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'%3E%3Crect x='3' y='8' width='18' height='5'/%3E%3Cpath d='M5 13v8h14v-8M12 8v13'/%3E%3Cpath d='M12 8S9 3 6.5 4.5 9 8 12 8s5.5-2 3-3.5S12 8 12 8z'/%3E%3C/svg%3E"); }
.sp-an-i--tag { --sp-an-m: 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'%3E%3Cpath d='M3 3h8l10 10-8 8L3 11z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.5'/%3E%3C/svg%3E"); }
.sp-an-i--user { --sp-an-m: 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'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 3.6-6 8-6s8 2 8 6'/%3E%3C/svg%3E"); }
.sp-an-i--info { --sp-an-m: 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'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v6M12 7.5v.5'/%3E%3C/svg%3E"); }
.sp-an-i--check { --sp-an-m: 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'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.5l2.5 2.5L16 9.5'/%3E%3C/svg%3E"); }
.sp-an-i--percent { --sp-an-m: 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'%3E%3Cpath d='M5 19L19 5'/%3E%3Ccircle cx='7.5' cy='7.5' r='2.5'/%3E%3Ccircle cx='16.5' cy='16.5' r='2.5'/%3E%3C/svg%3E"); }

/* -------------------------------------------------- small screens / sheet */

@media (max-width: 480px) {
  .sp-panel .sp-an {
    max-height: 40vh;
    padding: 8px 10px;
  }

  .sp-panel .sp-an-card {
    padding: 9px 10px;
  }

  /* 2.5.8 target size: the links are the only interactive elements in here. */
  .sp-panel .sp-an-cta,
  .sp-panel .sp-an-lk {
    min-height: 32px;
    padding: 8px 2px;
  }
}

/* Forced-colours mode: masks lose their tint, so pin the icon to the system
   text colour and keep the card border visible. */
@media (forced-colors: active) {
  .sp-panel .sp-an-i,
  .sp-answers .sp-an-i {
    background-color: CanvasText;
  }

  .sp-panel .sp-an-card,
  .sp-answers .sp-an-card {
    border-color: CanvasText;
  }
}