/*
  🚗 Plan my trip (web/planner.js): its dialog, on an event's private page (event-page.css's tokens)
  and in the app (choreboy.css's and event-ui.css's). Its colours are the host page's tokens, which
  follow the device's light or dark (each with a light fallback); the dimmed page behind it has its own
  pair. Phone first: 16 px from each edge of the screen, it scrolls inside itself when it's taller
  than the screen, and nothing goes sideways. The only motion, its fade in, is off with reduced motion.
*/

/* The dialog: shown with showModal() (the top layer, the page behind inert), or with [open] where a
   browser has no <dialog> (the same box, fixed in the middle). */
.pl { display: none; }
.pl[open] {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 1000;
  box-sizing: border-box;
  width: min(32rem, calc(100% - 32px));
  max-width: none;
  height: fit-content;
  max-height: calc(100% - 32px);
  margin: auto;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--border, #e4e7ec);
  border-radius: var(--radius-lg, 14px);
  background: var(--surface, #ffffff);
  color: var(--text, #101828);
  box-shadow: var(--shadow-lg, 0 12px 32px rgba(16, 24, 40, .14));
  animation: pl-in .16s ease-out;
}
.pl::backdrop { background: rgba(16, 24, 40, .45); }
@media (prefers-color-scheme: dark) {
  .pl::backdrop { background: rgba(0, 0, 0, .62); }
}
@keyframes pl-in { from { opacity: 0; transform: translateY(8px); } }
.pl *, .pl *::before, .pl *::after { box-sizing: border-box; }
.pl :focus-visible { outline: 2px solid var(--accent, #15803d); outline-offset: 2px; }
.pl [hidden] { display: none !important; }

.pl-box { padding: 16px 16px 14px; min-width: 0; overflow-wrap: anywhere; }
.pl-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.pl-title { margin: 0; padding-top: 4px; font-size: 1.2rem; line-height: 1.25; font-weight: 750; letter-spacing: -.01em; }
.pl-x { flex-shrink: 0; width: 40px; height: 40px; margin: -4px -6px 0 0; display: grid; place-items: center; border: 1px solid transparent; border-radius: var(--radius, 10px); background: transparent; color: var(--text-2, #475467); font: 600 1.05rem/1 var(--font, system-ui, sans-serif); cursor: pointer; }
.pl-x:hover { background: var(--surface-2, #f2f4f7); }
.pl-to { margin: 4px 0 14px; color: var(--text-3, #667085); font-size: .9rem; }

/* Where it starts: 🏠 From Home, 📍 Use where I am, or typed (→ Go). */
.pl-start { display: flex; flex-wrap: wrap; gap: 8px; }
.pl-start .pl-btn { flex: 1 1 12rem; }
.pl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 10px 14px; font: 650 .95rem/1.25 var(--font, system-ui, sans-serif); color: var(--text, #101828); background: var(--surface, #ffffff); border: 1px solid var(--border-strong, #d0d5dd); border-radius: var(--radius, 10px); box-shadow: var(--shadow-sm, 0 1px 2px rgba(16, 24, 40, .06)); cursor: pointer; text-align: center; }
.pl-btn:hover { background: var(--surface-2, #f2f4f7); }
.pl-start .pl-here { border-color: var(--ev-line, rgba(105, 65, 198, .38)); background: var(--ev-soft, #f4f0fd); color: var(--ev, #6941c6); }
.pl-btn[aria-disabled="true"], .pl-work[aria-disabled="true"], .pl-cand[aria-disabled="true"] { opacity: .6; cursor: progress; }
.pl-form { margin: 14px 0 0; }
.pl-label { display: block; margin: 0 0 6px; padding: 0; color: var(--text-2, #475467); font-size: .9rem; font-weight: 650; }
.pl-qrow { display: flex; gap: 8px; }
.pl-input { flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 10px 12px; font: 16px/1.3 var(--font, system-ui, sans-serif); color: var(--text, #101828); background: var(--surface, #ffffff); border: 1px solid var(--border-strong, #d0d5dd); border-radius: var(--radius-sm, 8px); }
.pl-input::placeholder { color: var(--text-3, #667085); }
.pl-qrow .pl-btn { flex-shrink: 0; min-width: 4.25rem; }

/* Arrive: on time, 15 or 30 min early (timed events, until they start). */
.pl-arrive { min-width: 0; margin: 14px 0 0; padding: 0; border: 0; }
.pl-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.pl-opt { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 12px; border: 1px solid var(--border-strong, #d0d5dd); border-radius: 999px; background: var(--surface, #ffffff); font-size: .9rem; font-weight: 600; cursor: pointer; }
.pl-opt:has(input:checked) { border-color: var(--ev, #6941c6); background: var(--ev-soft, #f4f0fd); color: var(--ev, #6941c6); }
.pl-radio { margin: 0; accent-color: var(--ev, #6941c6); }

/* The answer (aria-live): working, what went wrong, where from, the drive, the other ways, the links. */
.pl-out { margin: 14px 0 0; }
.pl-out:empty { display: none; }
.pl-out:focus { outline: none; }
.pl-working { margin: 0 0 8px; color: var(--text-2, #475467); font-weight: 600; }
.pl-note { margin: 0 0 8px; padding: 10px 12px; border-radius: var(--radius, 10px); background: var(--surface-2, #f2f4f7); color: var(--text-2, #475467); font-size: .92rem; }
.pl-note.pl-bad { background: var(--bad-soft, #fff1f3); color: var(--bad, #c01048); font-weight: 600; }
.pl-from { margin: 0 0 8px; color: var(--text-2, #475467); font-size: .92rem; }
.pl-link { padding: 4px 2px; border: 0; background: none; color: var(--accent-text, #15803d); font: inherit; font-weight: 650; text-decoration: underline; cursor: pointer; }
.pl-cands { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pl-cand { display: block; width: 100%; padding: 10px 12px; border: 1px solid var(--border, #e4e7ec); border-radius: var(--radius, 10px); background: var(--surface, #ffffff); color: var(--text, #101828); font: inherit; font-size: .92rem; text-align: left; cursor: pointer; }
.pl-cand:hover { border-color: var(--ev, #6941c6); background: var(--ev-soft, #f4f0fd); }
.pl-car { margin: 0; padding: 12px 14px; border: 1px solid var(--ev-line, rgba(105, 65, 198, .38)); border-radius: var(--radius, 10px); background: var(--ev-soft, #f4f0fd); line-height: 1.45; }
.pl-car strong { font-weight: 750; }
.pl-modes { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.pl-mode { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-height: 36px; font-weight: 600; }
.pl-work { min-height: 32px; padding: 4px 12px; border: 1px solid var(--border-strong, #d0d5dd); border-radius: 999px; background: var(--surface, #ffffff); color: var(--text, #101828); font: 600 .85rem/1.2 var(--font, system-ui, sans-serif); cursor: pointer; }
.pl-work:hover { background: var(--surface-2, #f2f4f7); }
.pl-fine { margin: 8px 0 0; color: var(--text-3, #667085); font-size: .82rem; }
.pl-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.pl-pill { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 8px 14px; border: 1px solid var(--border-strong, #d0d5dd); border-radius: 999px; background: var(--surface, #ffffff); color: var(--text, #101828); text-decoration: none; font-weight: 600; font-size: .9rem; line-height: 1.25; text-align: center; }
.pl-pill:hover { border-color: var(--ev, #6941c6); background: var(--ev-soft, #f4f0fd); }

/* What's sent where, and OpenStreetMap's credit once its data shows. */
.pl-privacy { margin: 16px 0 0; color: var(--text-3, #667085); font-size: .82rem; line-height: 1.45; }
.pl-osm { margin: 6px 0 0; color: var(--text-3, #667085); font-size: .78rem; }
.pl-osm a { color: var(--text-2, #475467); font-weight: 600; }

@media (max-width: 479px) {
  .pl-start .pl-btn { flex-basis: 100%; }
  .pl-links .pl-pill { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .pl[open] { animation: none; }
}