* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
}

body {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-text);
}

h1,
h2,
h3 {
  font-family: var(--font-display);
}

a {
  color: inherit;
}

/* The wordmark, one treatment for the site's .logo and the four apps' top
   bars. The noTIP-ID logo (/img/brand) is drawn over the element, which
   keeps "NoTip" as its text for screen readers and for forced-colors mode,
   where background images are dropped and the text comes back. Paper
   letters on the night canvas, Ink letters on the apps' light ground. */
.logo,
.order-wordmark,
.admin-wordmark,
.business-wordmark,
.dispatch-wordmark {
  display: block;
  flex: none;
  background: center / contain no-repeat;
  overflow: hidden;
  white-space: nowrap;
  text-indent: 110%;
  text-decoration: none;
}

.logo {
  width: 6.25rem;
  aspect-ratio: 984 / 197;
  background-image: url("/img/brand/wordmark-paper.svg");
}

.order-wordmark,
.admin-wordmark,
.business-wordmark,
.dispatch-wordmark {
  width: 5.25rem;
  aspect-ratio: 984 / 197;
  background-image: url("/img/brand/wordmark-ink.svg");
}

@media (forced-colors: active) {
  .logo,
  .order-wordmark,
  .admin-wordmark,
  .business-wordmark,
  .dispatch-wordmark {
    width: auto;
    aspect-ratio: auto;
    background-image: none;
    text-indent: 0;
  }
}

/* ── Site header ──────────────────────────────────────────────────────────
   The public site's bar: the wordmark home on the left, Order and the
   account icon on the right. Written into each page's HTML rather than
   rendered, so it paints on first frame and works without JS; header.js
   only fills the icon and, once ordering is open, points Order at /order.
   Fixed, not sticky, because landing.css makes <body> a flex row. Geometry
   mirrors /order's .order-top (order.css). */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 30; /* .order-top's layer: under #nt-tip (150) and the skip link (200) */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  height: var(--site-header-h);
  padding: 0 1rem;
  background: var(--ink);
  color: var(--paper);
  color-scheme: dark;
  border-bottom: 1px solid var(--line-soft);
}

/* Audience pages carry the wordmark only, and it scrolls away with the
   page: nothing on them needs to stay reachable, and the participate
   signature pad has a scroll/click flake history a fixed bar would feed. */
.site-header--logo-only {
  position: absolute;
}

@media (min-width: 880px) {
  .site-header {
    padding: 0 1.5rem;
  }
}

/* Keyboard focus, anchors and scrollIntoView stop below the fixed bar
   (WCAG 2.4.11). It stacks with the 4.5rem heading scroll-margin below,
   which only moves a jumped-to heading a little lower. */
html:has(> body > .site-header:not(.site-header--logo-only)) {
  scroll-padding-top: calc(var(--site-header-h) + 0.5rem);
}

/* The apps' wordmark width: the white lockup draws its letters at exactly
   /order's size (84 x 35px). Margin reset beats any page's .logo rule. It
   shrinks first, so a narrow bar gives up wordmark before it pushes the
   account icon off the edge. */
.site-header .logo {
  width: 5.25rem;
  min-width: 3.5rem;
  flex-shrink: 1;
  margin: 0;
  border-radius: 4px;
}

.site-header .logo:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

.site-header__end {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex: none;
}

/* The site's primary pill: teal with white text (6.0:1). The min-width
   holds the box steady across the Public Sans font swap, so it never
   shifts. */
.site-order {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  min-width: 5rem;
  height: 2.5rem;
  padding: 0 1rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-text);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition: background 150ms ease;
}

/* 40px to see, 44px to hit. */
.site-order::before {
  content: "";
  position: absolute;
  inset: -0.125rem 0;
}

.site-order:hover {
  background: var(--accent-soft);
}

.site-order:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.site-account {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--muted);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}

.site-account:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 0;
}

/* A fixed 36px box: whatever header.js puts inside cannot move anything. */
.site-account__face {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  overflow: hidden;
  border: 1.5px solid var(--faint);
  border-radius: 50%;
  transition:
    color 150ms ease,
    border-color 150ms ease;
}

.site-account:not([data-account="in"]):hover .site-account__face {
  color: var(--paper);
  border-color: var(--paper);
}

.site-account__glyph {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
}

/* Signed in is filled and signed out is outlined. That difference, not the
   glyph, is what tells a no-photo, no-name account from a visitor. Paper,
   not orange, so the Order pill stays the bar's only orange. */
.site-account[data-account="in"] .site-account__face {
  background: var(--paper);
  border-color: var(--paper);
  color: var(--ink);
}

.site-account[data-account="in"]:hover .site-account__face {
  box-shadow: 0 0 0 2px var(--muted);
}

.site-account__initial {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
}

.site-account__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Account menu (PRD-36 §4.2) ─────────────────────────────────────────
   The disclosure panel behind the site header's `#site-account` button and
   the ordering shell's `#account-glyph` button alike — both pages load this
   stylesheet, so the panel lives here once rather than once per shell, and
   `order.css` stays untouched. Positioned fixed below the bar and
   right-aligned to the trigger by accountMenu.js (top/right inline); the
   width and the phone gutters below are the stylesheet's half. A plain
   light card under either bar, the way every popover in the kit is. */
.account-menu {
  position: fixed;
  z-index: 50; /* above either bar's layer (30), below the skip link (200) */
  width: 280px;
  margin: 0;
  padding: 0.375rem;
  border: 1px solid var(--paper-line-soft);
  border-radius: 12px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: var(--shadow-3, var(--shadow-pop));
  animation: account-menu-in 120ms ease-out;
}

@keyframes account-menu-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}

.account-menu__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.account-menu__item {
  margin: 0;
  padding: 0;
}

.account-menu__header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem;
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
}

.account-menu__face {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  overflow: hidden;
  border: 1.5px solid var(--paper-line);
  border-radius: 50%;
  background: var(--paper-well);
  color: var(--ink-faint);
}

.account-menu__glyph {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
}

.account-menu__initial {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
}

.account-menu__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.account-menu__meta {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}

.account-menu__name {
  font-size: var(--t-md, 1rem);
  font-weight: 600;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-menu__sub {
  font-size: 0.8125rem;
  line-height: 1.25;
  color: var(--ink-muted);
}

.account-menu__row {
  display: block;
  width: 100%;
  padding: 0.625rem;
  border: 0;
  border-radius: 8px;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 0.9375rem;
  line-height: 1.25;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.account-menu__label {
  margin: 0.375rem 0 0;
  padding: 0.375rem 0.625rem 0.125rem;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink-muted);
}

.account-menu__header:hover,
.account-menu__row:hover {
  background: var(--paper-well);
}

.account-menu__header:focus-visible,
.account-menu__row:focus-visible {
  outline: 2px solid var(--accent-ink);
  outline-offset: -2px;
}

.account-menu__header[aria-current="page"],
.account-menu__row[aria-current="page"] {
  font-weight: 700;
}

.account-menu__error {
  margin: 0.25rem 0 0;
  padding: 0.375rem 0.625rem;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--error-ink);
}

.account-menu__error[hidden] {
  display: none;
}

/* The ordering shell's trigger is a link in the markup and the menu's
   button once signed in: the button must not wear the UA's own chrome. */
button.account-glyph {
  padding: 0;
  font: inherit;
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .account-menu {
    animation: none;
  }
}

/* A phone zoomed in (360px at 150% is 240 CSS px): the gutters and the
   pill's padding give way too, so the fixed bar, which nobody can scroll,
   never clips the account icon. The pill stays 40px tall, the icon 44px. */
@media (max-width: 16rem) {
  .site-header {
    gap: 0.5rem;
    padding: 0 0.5rem;
  }

  .site-order {
    min-width: 0;
    padding: 0 0.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-order,
  .site-account__face {
    transition: none;
  }
}

@media (forced-colors: active) {
  .site-order {
    border: 1px solid LinkText;
  }
  .site-account__face {
    border-color: LinkText;
  }
}

@media print {
  .site-header {
    display: none;
  }
}

/* Turnstile's interaction-only widget renders nothing at all for a visitor
   Cloudflare is happy about, so the container must take no room until it
   actually holds a challenge — otherwise every signup form carries a gap
   for something that is usually not there. */
.turnstile:not(:empty) {
  margin: 0.75rem 0;
}

/* "Continue with Google" — Google's branded button, drawn here instead of by
   Google's script. Sign-in is a server-side redirect (src/routes/googleAuth.ts),
   so the page needs no third-party JavaScript and no CSP change, and Google's
   branding guidelines allow a custom button that keeps their spec: the light
   theme (#FFFFFF fill, a 1px #747775 stroke inside, #1F1F1F text), Google
   Sans Medium 14/20 (Roboto or Arial where it is not installed — it is not
   ours to serve), 12px before the logo, 10px after it and 12px after the
   text, and the standard four-colour "G" (/img/google-g.svg) unaltered on
   white. Pill is one of the two shapes allowed, and the one the site's own
   buttons use. https://developers.google.com/identity/branding-guidelines
   The label stays one of Google's three approved phrases.

   The wrapper around it is `hidden` until GET /api/config says the route
   exists, which is what keeps a switched-off deploy from showing a button
   that 404s. */
.google-btn {
  position: relative;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid #747775;
  border-radius: 999px;
  background: #ffffff;
  color: #1f1f1f;
  font-family: "Google Sans", Roboto, Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.25px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: box-shadow 0.218s;
}

/* Google's state layer: #303030 at 8% on hover and 12% when pressed or
   focused, under the logo and label rather than over them. */
.google-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #303030;
  opacity: 0;
  transition: opacity 0.218s;
  pointer-events: none;
}

.google-btn:hover {
  box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15);
}

.google-btn:hover::before {
  opacity: 0.08;
}

.google-btn:active::before,
.google-btn:focus-visible::before {
  opacity: 0.12;
}

.google-btn:focus-visible {
  outline: 2px solid #1f1f1f;
  outline-offset: 2px;
}

.google-btn__logo {
  position: relative;
  flex: none;
  width: 20px;
  height: 20px;
  margin-right: 10px;
}

/* Centred on the button, not on the space right of the logo: the right
   margin mirrors the logo and its gap (20px + 10px), the way Google's own
   full-width button reads. */
.google-btn__label {
  position: relative;
  flex: 1;
  min-width: 0;
  margin-right: 30px;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
}

/* "Continue with Apple" — Apple's black button style from the Sign in with
   Apple Human Interface Guidelines, drawn here instead of by an Apple
   script. Sign-in is a server-side redirect (src/routes/appleAuth.ts), so
   the page needs no third-party JavaScript and no CSP change. The spec: a
   black (#000000) fill, white label in the system font, Apple's logo mark
   (/img/apple-logo.svg) unaltered, the same pill height and padding as
   .google-btn above so the two sit as equals, and the label "Continue with
   Apple" — one of Apple's approved phrases. Apple's rule is no colour
   change on hover or press, so only the focus ring answers: a visible
   outline, the same weight the Google button uses.

   Apple sits above Google on every door (PRD-29 §1.8): the markup carries
   the .apple-signin block first, and one "or" divider between the two
   serves both (public/js/shared/appleAuth.js). Like its neighbour, the
   wrapper stays `hidden` until GET /api/config says the route exists. */
.apple-btn {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid #000000;
  border-radius: 999px;
  background: #000000;
  color: #ffffff;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: -0.24px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.apple-btn:hover {
  color: #ffffff;
  text-decoration: none;
}

.apple-btn:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px #000000;
}

.apple-btn__logo {
  flex: none;
  width: 20px;
  height: 20px;
  margin-right: 10px;
  color: #ffffff;
}

/* Centred on the button, mirroring the Google label's measure so the two
   buttons read as a pair. */
.apple-btn__label {
  flex: 1;
  min-width: 0;
  margin-right: 30px;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
}

/* One "or" divider serves both sign-in buttons (PRD-29 §3.7): each door
   carries a single divider between its Apple and Google blocks, revealed
   when either provider is on. It sets `display` in the page sheets, which
   beats the `hidden` attribute — so it gets its own hiding rule here, in
   the one sheet every door loads. */
.or-divider[hidden] {
  display: none;
}

/* ── Skip link ──────────────────────────────────────────────────────────
   First in tab order on every page (each page's HTML carries the anchor).
   Visually hidden until focused, so sighted screenshots never change. */

.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 200;
  padding: 0.7rem 1.1rem;
  border-radius: 999px;
  background: var(--paper, #fff);
  color: var(--ink, #14201e);
  font-weight: 700;
  font-size: 0.85rem;
  text-decoration: none;
  box-shadow: 0 12px 32px -8px rgba(11, 11, 12, 0.35);
}

.skip-link:focus-visible {
  top: 1rem;
  outline: 2px solid var(--focus-ring, currentColor);
  outline-offset: 2px;
}

/* A shared visually-hidden utility. landing.css keeps its own copy for
   the pages that never load the app sheets; both spell the same thing. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Footer social row ──────────────────────────────────────────────────
   The @NoTipDelivery accounts, one row under the links of every public
   .site-footer. It sits inside the footer, so each page's own .site-footer
   rules (landing, dashboard, participate-pitch, app-tokens, the privacy
   page's inline sheet) still set its size, colour and link treatment on
   the night canvas and the apps' light ground alike; this only puts it on
   a line of its own. The markup glues each "·" to the name before it with
   a no-break space, so a narrow phone wraps between names, never before a
   dot, and balance keeps the two lines even at 320px. The tall lines and
   the links' block padding give each name a hit area about 24px tall, so
   the two wrapped lines of small links are not stacked flush (WCAG 2.5.8).
   The links stay inline: an inline-block would add break points and undo
   the dot gluing. */

.site-footer-social {
  margin-top: 0.5rem;
  line-height: 2;
  text-wrap: balance;
}

.site-footer-social a {
  padding-block: 0.3rem;
}

/* ── Accessible tooltip bubble ──────────────────────────────────────────
   One style for both canvases: a near-black pill with paper text and a
   hairline edge reads on the dark marketing ground and on the warm app
   ground alike, which is what keeps one `#nt-tip` element cohesive
   across all four front doors. Hidden by default — no layout, no
   screenshot diff — until `tooltip.js` fills and places it. */

#nt-tip {
  position: fixed;
  z-index: 150;
  max-width: 16rem;
  padding: 0.55rem 0.7rem;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: var(--brand-ink);
  color: var(--brand-white);
  font-size: 0.8rem;
  font-weight: 500;
  line-height: 1.45;
  box-shadow: 0 12px 32px -8px rgba(11, 11, 12, 0.5);
  pointer-events: none;
  animation: nt-tip-in 120ms ease;
}

#nt-tip[hidden] {
  display: none;
}

#nt-tip::before {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  background: inherit;
  border: inherit;
  transform: rotate(45deg);
}

#nt-tip[data-placement="top"]::before {
  bottom: -6px;
  left: calc(50% - 5px);
  border-top: none;
  border-left: none;
}

#nt-tip[data-placement="bottom"]::before {
  top: -6px;
  left: calc(50% - 5px);
  border-bottom: none;
  border-right: none;
}

#nt-tip[data-placement="left"]::before {
  right: -6px;
  top: calc(50% - 5px);
  border-bottom: none;
  border-left: none;
}

#nt-tip[data-placement="right"]::before {
  left: -6px;
  top: calc(50% - 5px);
  border-top: none;
  border-right: none;
}

@keyframes nt-tip-in {
  from {
    opacity: 0;
    transform: translateY(3px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Triggers that wrap static text show a dotted underline on hover/focus
   so the tooltip is discoverable without adding chrome. Applied with
   `class="tip-trigger"` beside `data-tip` — the attribute alone stays
   invisible for tight rows (chips, pills) where even a dotted line is
   noise. */
.tip-trigger {
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  border-radius: 2px;
}

.tip-trigger:focus-visible {
  outline: 2px solid var(--focus-ring, currentColor);
  outline-offset: 2px;
}

/* Inline "i" affordance for sections that need a visible hint (checkout,
   admin, dispatch, business — never the baseline-captured landing/order
   browse heroes). A real <button>, 24px, keyboard- and touch-ready. */
.info-dot {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  margin-left: 0.35rem;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--paper-line, var(--line, #ddd2c3));
  background: var(--paper, #fff);
  color: var(--ink-faint, #6f6659);
  font: inherit;
  font-size: 0.75rem;
  font-weight: 800;
  font-style: normal;
  line-height: 1;
  cursor: help;
  vertical-align: 2px;
}

.info-dot:hover {
  color: var(--ink, #14201e);
  border-color: var(--ink, #14201e);
}

.info-dot:focus-visible {
  outline: 2px solid var(--focus-ring, currentColor);
  outline-offset: 2px;
  color: var(--ink, #14201e);
}

/* Keyboard-hint key cap, e.g. "Press / to search". */
kbd {
  display: inline-block;
  min-width: 1.4em;
  padding: 0.1em 0.4em;
  border-radius: 6px;
  border: 1px solid var(--paper-line, var(--line, #ddd2c3));
  border-bottom-width: 2px;
  background: var(--paper, #fff);
  color: var(--ink-muted, inherit);
  font: inherit;
  font-size: 0.78em;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}

/* Anchor/scroll foundations: sticky top bars (3.5rem everywhere) must
   never cover a heading jumped to by a skip link or an in-page anchor. */
main :is(h1, h2, h3)[id],
main [id]:target {
  scroll-margin-top: 4.5rem;
}

@media (prefers-reduced-motion: reduce) {
  #nt-tip,
  .pop-in {
    animation: none;
  }
}

/* ── Celebration pop ────────────────────────────────────────────────────
   Level-ups, first votes, placed orders: a 200ms scale-in that reads as
   Noah cheering. Applied to elements rendered hidden (dashboard
   level-up, shortlist) so first paint — and every baseline — is
   unchanged. Scope-agnostic: opacity and transform only. */

.pop-in {
  animation: pop-in 200ms ease;
}

@keyframes pop-in {
  from {
    opacity: 0;
    transform: scale(0.97) translateY(4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ── Google address autocomplete ─────────────────────────────────────────
   public/js/shared/places.js swaps a street <input> for Google's
   <gmp-place-autocomplete> once GET /api/config carries a browser key;
   without one the element never exists and none of this applies. It draws
   its own input and prediction list inside a shadow root, so it is dressed
   through the CSS properties and ::part() hooks Google exposes, with the
   input-field tokens from tokens.css, to read as the plain input it stands
   in for. Pages whose inputs look different restyle it beside them
   (app-tokens.css). */
gmp-place-autocomplete {
  display: block;
  width: 100%;
  min-width: 0; /* a flex item in the landing page's .check-row */
  flex: 1;
  font: inherit;
  color: var(--ink);
  color-scheme: light;
  background-color: var(--paper-bright);
  border: 1px solid var(--ink-faint);
  border-radius: var(--r-control);
}

gmp-place-autocomplete:focus-within {
  border-color: var(--accent);
}

/* Its focus ring is an overlay part drawn around the input; give it the
   ring every other field on the page shows instead of Google's blue. */
gmp-place-autocomplete::part(focus-ring) {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  box-shadow: none;
}

gmp-place-autocomplete::part(input) {
  padding: 0.7rem 0.9rem;
  font: inherit;
  color: inherit;
}

gmp-place-autocomplete::part(prediction-list) {
  color: var(--ink);
  background-color: var(--paper-bright);
  border: 1px solid var(--paper-line);
  border-radius: var(--r-control);
  box-shadow: var(--shadow-pop);
}

gmp-place-autocomplete::part(prediction-item) {
  font: inherit;
}

gmp-place-autocomplete::part(prediction-item-selected) {
  background-color: var(--paper);
}

gmp-place-autocomplete::part(prediction-item-match) {
  font-weight: 700;
}