/* MyGoal Signal — find.css: the Allwyn search — its header button, the panel under the header, the card found. */
/* The button: Allwyn's round logo with a small magnifier on its edge. */
.find { position: relative; flex: none; width: 2.375rem; height: 2.375rem; padding: 0; border: 0; background: none; cursor: pointer;
  display: grid; place-items: center; }
.find img { width: 2rem; height: 2rem; border-radius: 50%; box-shadow: var(--allwyn-logo); }
.find svg { position: absolute; right: 0; bottom: 0; width: 1rem; height: 1rem; padding: 0.15rem; border-radius: 50%;
  color: var(--ink); background: var(--paper); box-shadow: var(--plate-depth); }

/* The panel drops under the header at its right edge; on a phone it takes the width between the gutters. */
.finder { position: absolute; top: calc(100% + 0.5rem); right: var(--inset); z-index: 7; width: min(26rem, calc(100% - 2 * var(--inset)));
  padding: 0.625rem; border-radius: 0.875rem; background: var(--tile); border: 1px solid var(--tile-edge);
  box-shadow: var(--tile-depth), var(--tile-hover); }
.finder[hidden] { display: none; }
.find-row { display: flex; gap: 0.5rem; }
.find-field { flex: 1; min-width: 0; display: flex; align-items: center; gap: 0.5rem; height: 2.75rem; padding: 0 0.75rem;
  border-radius: 0.625rem; border: 1px solid var(--tile-edge); background: var(--paper); }
.find-field:focus-within { border-color: var(--allwyn); }
.find-field img { flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%; box-shadow: var(--allwyn-logo); }
.find-field input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; padding: 0;
  font: 800 1.125rem/1 "Manrope", sans-serif; letter-spacing: 0.04em; color: var(--allwyn); }
.find-field input::placeholder { font-weight: 600; letter-spacing: 0; color: var(--slate); }
.find-x { flex: none; width: 2.75rem; height: 2.75rem; border-radius: 50%; cursor: pointer; font-size: 1rem; color: var(--coral);
  border: 1px solid var(--tile-edge); background: var(--tile); box-shadow: var(--tile-depth); }

/* Rows: the number in Allwyn's teal, the two teams, the kickoff in the visitor's time. */
.find-list { margin-top: 0.375rem; }
.find-note { margin: 0.375rem 0.25rem 0; font-size: 0.85rem; color: var(--slate); }
.find-list button { width: 100%; display: grid; grid-template-columns: 3.25rem minmax(0, 1fr) auto; align-items: center; gap: 0.625rem;
  padding: 0.5rem 0.5rem; border: 0; border-radius: 0.5rem; background: none; cursor: pointer; text-align: left; }
.find-list button:hover, .find-list button:first-child { background: var(--pale); }
.find-list b { font: 800 1.0625rem/1 "Manrope", sans-serif; color: var(--allwyn); text-shadow: var(--allwyn-shadow); }
.find-list span { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.find-list small { font-size: 0.78rem; font-weight: 600; color: var(--slate); white-space: nowrap; }
@media (max-width: 420px) {
  .find-list button { grid-template-columns: 3rem minmax(0, 1fr); row-gap: 0.125rem; }
  .find-list small { grid-column: 2; }
}

/* The card found: ringed in Allwyn's teal for a moment. */
.card.found { outline: 3px solid var(--allwyn); outline-offset: 2px; transition: outline-color 400ms ease; }