/* Route Planner Teams guide overlay (2026-10-16): a copy of the planning toolkit's guide.css with its tokens mapped onto
   this site's (--primary, --text, --bg...). The engine is in guide-engine.js. */
.gd-layer, .gd-toast, .gd-bubble, .gd-actions, .gd-nudge { --accent: var(--primary, #2563eb); --accent-text: var(--primary, #2563eb); --body: inherit;
  --paper: var(--bg, #fff); --paper-2: var(--bg-secondary, #f4f7fb); --ink: var(--text, #111827); --ink-2: var(--text-muted, #4b5563); --ink-3: var(--text-muted, #6b7280);
  --rule: var(--border, rgba(0,0,0,.12)); --rule-2: var(--border, rgba(0,0,0,.12)); --t-xs: 12px; --t-sm: 13px; --t-base: 15px; --t-md: 17px; }
.gd-bubble .btn { min-height: 40px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--rule); background: var(--paper-2); color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; }
.gd-bubble .btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.gd-bubble .btn.small { font-size: 0.9rem; }
.gd-bubble .btn:disabled { opacity: 0.5; cursor: default; }
.gd-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.gd-actions .btn { border-radius: 8px; border: 1px solid var(--rule); background: var(--paper); color: var(--ink); font: inherit; font-weight: 600; padding: 6px 12px; cursor: pointer; }
.gd-actions .btn-ghost { background: transparent; }
@media (max-width: 640px) { .gd-opt { display: none; } }
.gd-nudge { display: inline-flex; align-items: center; gap: 4px; background: var(--accent); color: #fff; border-radius: 999px; padding: 4px 6px 4px 12px; font-size: 0.9rem; }
.gd-nudge-go { border: 0; background: transparent; color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.gd-nudge-x { border: 0; background: transparent; color: #fff; font-size: 1.1rem; line-height: 1; cursor: pointer; min-width: 28px; min-height: 28px; }
/* A dialog opened while a guide runs is non-modal, so the guide's overlay can sit above it. */
.tm-dialog[open]:not(:modal) { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 9000; margin: 0; box-shadow: 0 12px 40px rgba(15, 23, 42, 0.35); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* The guide overlay: spotlight, pretend cursor and speech bubble. A fixed layer, so nothing on the page moves. */
.gd-layer { position: fixed; inset: 0; z-index: 10000; pointer-events: none; font-family: var(--body); }
.gd-spot {
  position: fixed; border-radius: 8px; border: 2px solid var(--accent); pointer-events: none;
  /* The dim is an outline, not the toolkit's box-shadow: with a non-modal dialog open under the overlay, Chromium
     painted the spot's border but not its 100vmax shadow (seen 2026-10-16); the outline paints regardless. */
  outline: 100vmax solid rgba(8, 14, 11, 0.5);
  transition: left 0.25s ease, top 0.25s ease, width 0.25s ease, height 0.25s ease;
}
.gd-cursor { position: fixed; left: 0; top: 0; width: 24px; height: 24px; margin: -3px 0 0 -3px; pointer-events: none; transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45)); }
.gd-cursor svg { display: block; width: 24px; height: 24px; transition: transform 0.12s ease; transform-origin: 3px 3px; }
.gd-cursor.gd-click svg { transform: scale(0.82); }
.gd-bubble {
  position: fixed; width: 340px; max-width: calc(100vw - 16px); box-sizing: border-box; pointer-events: auto;
  background: var(--paper); color: var(--ink); border: 1px solid var(--rule-2, var(--rule)); border-radius: 10px;
  box-shadow: 0 8px 28px rgba(8, 14, 11, 0.28); padding: 12px 14px 12px; outline: none;
}
.gd-bubble:focus-visible { box-shadow: 0 0 0 3px var(--accent), 0 8px 28px rgba(8, 14, 11, 0.28); }
.gd-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.gd-count { font-size: var(--t-sm); font-weight: 700; color: var(--accent-text); }
.gd-x { min-width: 44px; min-height: 44px; margin: -10px -10px -10px 0; border: 0; background: none; color: var(--ink-2); font-size: 1.3rem; line-height: 1; cursor: pointer; border-radius: 6px; }
.gd-x:hover { color: var(--ink); background: var(--paper-2); }
.gd-prog { display: flex; gap: 3px; list-style: none; margin: 0 0 8px; padding: 0; }
.gd-prog li { flex: 1; height: 4px; border-radius: 2px; background: var(--rule-2, var(--rule)); }
.gd-prog li.on { background: var(--accent); }
.gd-title { display: block; font-size: var(--t-md); font-weight: 700; line-height: 1.3; margin: 0 0 2px; }
.gd-text { margin: 0 0 10px; font-size: 0.9375rem; line-height: 1.5; color: var(--ink-2); }
.gd-ctrl { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.gd-ctrl .btn { min-height: 40px; }
.gd-ctrl .gd-spacer { flex: 1; }
.gd-choice[hidden], .gd-ctrl[hidden] { display: none; }
.gd-choice { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 4px; }
.gd-keys { font-size: var(--t-xs); color: var(--ink-3); margin: 8px 0 0; }
:root[data-theme="dark"] .gd-spot { outline-color: rgba(0, 0, 0, 0.66); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .gd-spot { outline-color: rgba(0, 0, 0, 0.66); } }
.gd-sheet { left: 8px !important; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); top: auto !important; width: auto; max-width: none; }
.gd-sheet .gd-keys { display: none; }
.gd-sheet.gd-sheet-top { bottom: auto; top: calc(8px + var(--gd-top, 0px)) !important; }
@media (max-width: 640px) { .gd-ctrl .btn { min-height: 44px; } }
@media (prefers-reduced-motion: reduce) {
  .gd-spot, .gd-cursor, .gd-cursor svg { transition: none; }
  .gd-cursor { display: none; }
}
.gd-toast { position: fixed; left: 50%; bottom: calc(24px + var(--cookie-h, 0px) + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 10001; background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: 8px; font: 600 var(--t-base) var(--body); box-shadow: 0 6px 20px rgba(8, 14, 11, 0.3); max-width: calc(100vw - 32px); }