/* location-pill.css · WB-YSA-R2 L1 (#6257) · the pill under the title on every tab screen.
 * Colours read off frame 8a (wb-r2-002-8a-location-pill-states): iOS light/dark, Android light/dark.
 * Light is the default; dark follows the system unless the page pins a scheme, same rule as /wb-tokens.css. */
.wbl-pill {
  --wbl-bg: #dbe5f7; --wbl-ink: #0b1530; --wbl-ic: #2f6fe0; --wbl-act: #1f5fc4;
  display: inline-flex; align-items: center; gap: 8px;
  max-width: 100%; min-height: 44px; margin: 4px 0 10px; padding: 0 16px 0 14px;
  border: 0; border-radius: 999px; background: var(--wbl-bg); color: var(--wbl-ink);
  font: inherit; font-family: var(--wb-font, system-ui, sans-serif); font-size: 15px; font-weight: 500;
  text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.wbl-pill:disabled { cursor: default; opacity: 1; }
.wbl-pill .wbl-ic { flex: none; color: var(--wbl-ic); }
.wbl-pill .wbl-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wbl-pill .wbl-a { flex: none; font-weight: 700; color: var(--wbl-act); }
.wbl-pill .wbl-chev { flex: none; margin-left: 4px; font-size: 20px; line-height: 1; opacity: .6; }
.wbl-pill[data-state="on"] .wbl-t { font-weight: 700; }
.wbl-pill[data-state="finding"] .wbl-ic { animation: wbl-spin 1s linear infinite; }
@keyframes wbl-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .wbl-pill[data-state="finding"] .wbl-ic { animation: none; } }
html.android .wbl-pill { border-radius: 12px; min-height: 44px; }
/* Explore's root has no side padding of its own; its title carries 20px, so the pill does too. */
.wbe-root > .wbl-pill { margin: 0 20px 10px; max-width: calc(100% - 40px); }
.wbe-root > .wbl-help { margin: -4px 24px 10px; }
.wbl-help { margin: -4px 4px 10px; font-size: 15px; line-height: 1.35; color: var(--wb-ink-2, #555); }

/* light */
.wbl-pill[data-state="off"]     { --wbl-bg: #f6ddd5; --wbl-ink: #2a1712; --wbl-ic: #a33a00; --wbl-act: #a33a00; }
.wbl-pill[data-state="finding"] { --wbl-bg: #e3e4ea; --wbl-ink: #1c1f27; --wbl-ic: #6b7080; }
html.android .wbl-pill[data-state="on"]      { --wbl-bg: #d9e2ff; --wbl-ink: #0b1a44; }
html.android .wbl-pill[data-state="off"]     { --wbl-bg: #ffdbcc; --wbl-ink: #351000; --wbl-ic: #a33a00; --wbl-act: #a33a00; }

/* dark: the same values twice, once for the system setting and once for a page that pins dark */
@media (prefers-color-scheme: dark) {
  html:not([data-wb-scheme="light"]) .wbl-pill                     { --wbl-bg: #1f2c4a; --wbl-ink: #e8eefc; --wbl-ic: #76a3f5; --wbl-act: #76a3f5; }
  html:not([data-wb-scheme="light"]) .wbl-pill[data-state="off"]     { --wbl-bg: #3b2520; --wbl-ink: #f3e7e3; --wbl-ic: #f0845a; --wbl-act: #ff8f5e; }
  html:not([data-wb-scheme="light"]) .wbl-pill[data-state="finding"] { --wbl-bg: #262a33; --wbl-ink: #e6e8ee; --wbl-ic: #a5aab8; }
  html.android:not([data-wb-scheme="light"]) .wbl-pill                     { --wbl-bg: #2c3a5e; --wbl-ink: #dce4ff; }
  html.android:not([data-wb-scheme="light"]) .wbl-pill[data-state="off"]     { --wbl-bg: #5a2a14; --wbl-ink: #ffdbcc; }
  html.android:not([data-wb-scheme="light"]) .wbl-pill[data-state="finding"] { --wbl-bg: #2c3348; }
}
html[data-wb-scheme="dark"] .wbl-pill                     { --wbl-bg: #1f2c4a; --wbl-ink: #e8eefc; --wbl-ic: #76a3f5; --wbl-act: #76a3f5; }
html[data-wb-scheme="dark"] .wbl-pill[data-state="off"]     { --wbl-bg: #3b2520; --wbl-ink: #f3e7e3; --wbl-ic: #f0845a; --wbl-act: #ff8f5e; }
html[data-wb-scheme="dark"] .wbl-pill[data-state="finding"] { --wbl-bg: #262a33; --wbl-ink: #e6e8ee; --wbl-ic: #a5aab8; }
html.android[data-wb-scheme="dark"] .wbl-pill                     { --wbl-bg: #2c3a5e; --wbl-ink: #dce4ff; }
html.android[data-wb-scheme="dark"] .wbl-pill[data-state="off"]     { --wbl-bg: #5a2a14; --wbl-ink: #ffdbcc; }
html.android[data-wb-scheme="dark"] .wbl-pill[data-state="finding"] { --wbl-bg: #2c3348; }

/* WB-FLEX FR10 (#6744, T5): Blocked and Approximate are states of the rider's location, so they read the status roles
   in /wb-tokens.css: blocked is bad, approximate is warn. The pill is the role's tint, the icon its base, the action
   ("Settings", "Use precise") its ink, and the words stay the scheme's ink. The roles switch with the scheme and are
   the same on both skins (frames r1 SEM_L / SEM_D), so one rule per state replaces the iOS, Android, light and dark
   copies these states had. Each fallback is the light value. On, Off and Finding are not statuses and keep frame 8a.
   Last in the file and at (0,3,1) (html:root weighs (0,1,1)), so it beats every skin and scheme rule above: the
   heaviest of those, html.android:not([data-wb-scheme="light"]) .wbl-pill, is (0,3,1) and comes earlier.
   Pairs pinned at 4.5:1 per skin and scheme in web/src/fr10-status-app.test.ts. */
html:root .wbl-pill[data-state="blocked"] { --wbl-bg: var(--wb-bad-tint, #FCE4E7); --wbl-ink: var(--wb-ink, #0B1220); --wbl-ic: var(--wb-bad, #C21F35); --wbl-act: var(--wb-bad-ink, #C21F35); }
html:root .wbl-pill[data-state="approximate"] { --wbl-bg: var(--wb-warn-tint, #FBEFD2); --wbl-ink: var(--wb-ink, #0B1220); --wbl-ic: var(--wb-warn, #8A5A00); --wbl-act: var(--wb-warn-ink, #8A5A00); }