/* Onboarding chrome shared by Home's Getting started card and the map's
 * drawer pill and popover (spec §4.1). Kept out of styles.css because both
 * pages load it and only one of them loads the map's stylesheet rules. */

.ob-card h2 { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ob-progress { font-size: 12px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted, #666); }

.ob-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ob-steps[hidden] { display: none; }
.ob-step { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.ob-step .ob-label { flex: 1 1 auto; }
.ob-step.done .ob-label { color: var(--muted, #777); text-decoration: line-through; }
.ob-tick { inline-size: 1.1em; text-align: center; color: var(--teal-deep); font-weight: 700; }
.ob-go { text-decoration: none; font-size: 13px; padding: 3px 12px; white-space: nowrap; }

/* Drawer pill and its popover (Task 8). */
.ob-pill { display: block; inline-size: 100%; font: inherit; font-size: 13px; cursor: pointer;
  margin-block-end: 8px; padding: 7px 12px; text-align: start;
  border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: inherit; }
.ob-pill:hover { border-color: var(--teal-deep); color: var(--teal-deep); }
.ob-pill[hidden] { display: none; }
/* Above the drawer (71) and its backdrop (70) in styles.css — the pill that
 * opens this only exists INSIDE the open drawer, so anything lower renders
 * behind it and the click looks like it did nothing. */
.ob-popover { position: fixed; inset-block-end: 76px; inset-inline-start: 16px; z-index: 72;
  inline-size: min(320px, calc(100vw - 32px)); padding: 14px 16px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface);
  box-shadow: 0 8px 24px rgb(0 0 0 / 18%); }
.ob-popover[hidden] { display: none; }
.ob-popover h3 { margin: 0 0 10px; font-size: 14px; }

/* ── Guided tours (3b-2) ─────────────────────────────────────────────────
   driver.js paints its own overlay and popover. Two things are pinned here
   rather than left to its defaults: the product's font, and a z-index above
   this file's own .ob-popover (72) and the drawer (71). */
.driver-popover {
  font: inherit;
  font-family: var(--font);
  z-index: 10002;
  max-inline-size: 320px;
}
.driver-overlay { z-index: 10000; }
.driver-popover-title { font-size: 15px; font-weight: 700; }
.driver-popover-description { font-size: 13px; line-height: 1.5; }
.driver-popover-progress-text { font-size: 12px; color: var(--muted, #777); }
.driver-popover-next-btn, .driver-popover-prev-btn {
  font: inherit; font-size: 13px; border-radius: 6px;
}
/* driver.js positions the popover itself, but its footer is a physical
   left-to-right row. Mirror it so Back/Next read in the right order. */
[dir=rtl] .driver-popover-footer { flex-direction: row-reverse; }
[dir=rtl] .driver-popover-navigation-btns { flex-direction: row-reverse; }
[dir=rtl] .driver-popover-close-btn { left: 4px; right: auto; }

/* ── Welcome dialog (3b-2) ─────────────────────────────────────────────── */
#welcome-dialog { max-inline-size: 420px; border: 0; border-radius: 12px; padding: 24px; }
#welcome-dialog h2 { margin: 0 0 8px; font-size: 20px; }
#welcome-dialog p { margin: 0 0 16px; font-size: 14px; line-height: 1.55; color: var(--muted, #555); }
.welcome-actions { display: flex; flex-direction: column; gap: 8px; }
.welcome-actions button { font: inherit; font-size: 14px; padding: 10px 16px; border-radius: 8px; cursor: pointer; }
.welcome-foot { margin: 16px 0 0; font-size: 13px; text-align: center; }