/* find-web.css — the structures Find has on THIS client and the canvas does not.

   The canvas draws one card per service TIME. Web's results are parishes —
   `visibleParishes` returns parishes and `displayedTimes` narrows their times,
   and ADR-030 makes that single filter the thing the list and the map both
   read. So a web card carries every surviving time, grouped by kind, and that
   grid has no counterpart in find.css to borrow.

   It lives in its own file rather than in find.css because find.css is
   round-tripped with the design project: a web-only structure added there would
   be pushed back to a canvas that has no use for it. Everything below is drawn
   from the same tokens as the rest of the surface (INV-10).

   Loaded AFTER find.css. */

.fx-times-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.5rem 1.1rem;
  margin-top: 0.75rem;
}

.fx-colhead {
  font-family: var(--sans);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 0.35rem;
}

/* The kind's accent is the same one the pin and the card's service badge use
   (ADR-004), read from the token rather than restated. */
.fx-col--confession .fx-colhead { color: var(--purple); }
.fx-col--mass .fx-colhead { color: var(--blue-ink); }
.fx-col--adoration .fx-colhead { color: var(--orange-ink); }

.fx-times { display: flex; flex-wrap: wrap; gap: 0.3rem; }

.fx-time {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: var(--paper-2);
  border: 1px solid var(--hairline);
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.fx-time__note { color: var(--ink-3); font-size: 0.76rem; margin-left: 0.3rem; }

/* ADR-110 rule 6: a time on screen because of the DATE rather than the weekday
   says so. Warm, not muted like `__note` — it is the REASON the row is there,
   not a footnote to it, and on a holy day it is the only thing distinguishing a
   schedule that changed from one that is wrong. Tokens only (INV-10). */
.fx-time__badge {
  margin-left: 0.35rem;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  background: color-mix(in oklab, var(--orange) 12%, transparent);
  color: var(--orange-ink);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  vertical-align: 1px;
}

/* The banner host. The canvas's #hdBanner is itself one banner because it draws
   one; this client draws one per impacting day, so the host is a plain stack. */
.hdwrap { display: grid; gap: 0.5rem; }
.hdwrap[hidden] { display: none; }

/* Favorites are web's own list shape (ADR-033): an ordered set of cached
   snapshots with a refresh age and reorder controls. The canvas has no
   equivalent, so these keep their own names. */
.fx-favage { font-size: 0.74rem; color: var(--ink-3); }
.fx-favnote { font-size: 0.78rem; line-height: 1.55; color: var(--ink-3); margin-top: 0.5rem; }
.fx-addr { font-size: 0.86rem; color: var(--ink-2); }

/* Leaflet owns the pin's position here. The canvas lays its own pins out on a
   stub map, so `.pin`/`.pinc` are absolutely positioned there; inside a Leaflet
   divIcon that fights the marker's own transform and every pin lands in the
   corner. The look is the design's; only the positioning is this client's. */
.leaflet-marker-icon .pin,
.leaflet-marker-icon .pinc { position: static; transform: none; }

/* The saved-parishes section heading. It is not a parish name, and collapsing
   it onto `.card__name` made every "which parish is this card?" query find the
   section title first. */
.fx-favtitle {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--ink);
}

/* The detail map's callout marker. Deliberately NOT the results pin and not the
   design's cluster chip: a pin is compact because twenty of them must be
   readable at once (ADR-030), and a cluster chip counts parishes. Here there is
   exactly one parish and the marker can afford to name it and answer "should I
   go?" (ADR-032). */
.fx-callout { display: flex; flex-direction: column; align-items: center; }
.fx-callout__body {
  display: grid;
  gap: 0.1rem;
  justify-items: center;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--svc, var(--hairline-2));
  border-radius: var(--r-sm);
  padding: 0.35rem 0.6rem;
  box-shadow: var(--shadow-sm);
  max-width: 14rem;
  text-align: center;
}
.fx-callout__name { font-weight: 600; font-size: 0.82rem; color: var(--svc, var(--ink)); }
.fx-callout__far { font-size: 0.72rem; color: var(--ink-3); }
.fx-callout__svc { font-size: 0.72rem; color: var(--ink-2); }
.fx-callout__acc { font-size: 0.7rem; color: var(--ink-3); }
.fx-callout__stem { width: 2px; height: 7px; background: var(--svc, var(--ink-3)); }
.fx-callout__tip {
  width: 7px; height: 7px; border-radius: 999px;
  background: var(--svc, var(--ink-3)); border: 1.5px solid var(--surface);
}

/* Recenter and Directions belong to the EXPANDED detail map only — on a 13rem
   card there is nothing to recenter from, and the Travel row's Directions link
   is a thumb's width below. These rules lived in confess.html's style block
   until Find moved to its own page. */
#fxDetailMapWrap:not(.is-full) .fx-d-mapbtn--full { display: none; }
.fx-d-dirwrap { position: absolute; left: 0.7rem; bottom: 1.4rem; z-index: 500; display: none; }
#fxDetailMapWrap.is-full .fx-d-dirwrap { display: block; }