.py-roadtrip { margin: 24px 0; border: 1px solid #cfe0d4; border-radius: 22px; overflow: hidden; background: #f5f9f5; color: #223d36; }
.py-trip-header { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 24px 26px; background: #fff; }
.py-trip-eyebrow { color: #4c8065; font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 800; }
.prose .py-roadtrip .py-trip-header h3 { border: 0; padding: 0; margin: 5px 0; color: #25483a; font-size: 1.65rem; line-height: 1.3; }
.prose .py-roadtrip .py-trip-header p { margin: 0; color: #5c7367; font-size: .9rem; line-height: 1.6; }
.py-trip-counter { flex-shrink: 0; display: grid; text-align: center; padding: 12px 18px; background: #eef6eb; border-radius: 16px; border: 1px solid #d5e8cf; }
.py-trip-counter strong { font-size: 1.7rem; color: #347155; line-height: 1.4; }
.py-trip-counter span { font-size: .75rem; color: #577360; }
.py-trip-journey { position: relative; margin-top: 18px; background: radial-gradient(ellipse at 10% 20%, #cfe6c6 0, transparent 45%), radial-gradient(ellipse at 90% 75%, #c5dfba 0, transparent 45%), #e7f2df; }
.py-trip-map { position: absolute; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; }
.py-map-stop { pointer-events: auto; }
[data-trip-road-layer]:first-child { filter: drop-shadow(5px 8px 0 #8fa387) drop-shadow(3px 12px 5px #45603e40); }
[data-trip-car] { filter: drop-shadow(3px 5px 2px #23382970); }
.py-map-stop-ring { filter: drop-shadow(2px 4px 0 #75856e); }
.prose .py-roadtrip .py-map-stop { text-decoration: none; }
.py-trip-map text { font-family: 'Inter', system-ui, sans-serif; }
.py-map-caption { fill: #567260; font-size: 12px; font-weight: 800; letter-spacing: .08em; }
.py-map-stop-ring { fill: #fffdf4; stroke: #829887; stroke-width: 3; }
.py-map-number { fill: #4a6454; font-size: 16px; font-weight: 800; }
.py-map-stop[data-state="completed"] .py-map-stop-ring { fill: #26805b; stroke: #e9fff2; }
.py-map-stop[data-state="completed"] .py-map-number { fill: #fff; }
.py-map-stop[data-next="true"] .py-map-stop-ring { stroke: #9676cd; stroke-width: 5; }
.py-map-stop:focus .py-map-stop-ring, .py-map-stop:hover .py-map-stop-ring { stroke: #644499; stroke-width: 5; }
.py-trip-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding: 20px 26px; border-top: 1px solid #cbdec3; border-bottom: 1px solid #d7e4d6; background: #fff; }
.py-trip-toolbar strong { color: #254e3d; font-size: 1rem; }
.prose .py-roadtrip .py-trip-toolbar p { margin: 4px 0 0; color: #5c7367; font-size: .85rem; }
.prose .py-roadtrip .py-trip-continue, .prose .py-roadtrip .py-stop-link { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: #347759; color: #fff; text-decoration: none; font-weight: 700; font-size: .88rem; line-height: 1.4; padding: 11px 16px; border-radius: 10px; }
.prose .py-roadtrip .py-trip-continue:hover, .prose .py-roadtrip .py-stop-link:hover { background: #245b42; color: #fff; }
.prose .py-roadtrip .py-trip-help { margin: 0; padding: 16px 26px 0; color: #5c7367; font-size: .8rem; line-height: 1.6; }
.prose .py-roadtrip .py-trip-stops { position: relative; display: flex; flex-direction: column; gap: 42px; list-style: none; margin: 0; padding: 85px 24px 105px; pointer-events: none; }
.prose .py-roadtrip .py-stop-card { position: relative; width: calc(50% - 65px); margin: 0; padding: 18px; background: #fff; border: 1px solid #d7e3d7; border-radius: 16px; min-width: 0; scroll-margin-top: calc(var(--nav-h) + 24px); pointer-events: auto; box-shadow: 0 8px 24px #365e3d0c; }
.prose .py-roadtrip .py-stop-card:nth-child(even) { align-self: flex-end; }
.prose .py-roadtrip .py-stop-card[data-state="completed"] { box-shadow: inset 0 3px #4b9e72, 0 8px 20px #365e3d15; }
.prose .py-roadtrip .py-stop-card[data-next="true"] { box-shadow: inset 0 3px #ac91cf, 0 8px 20px #365e3d15; }
.py-stop-top { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; align-items: center; }
.py-stop-step { color: #5c7567; font-weight: 800; font-size: .68rem; text-transform: uppercase; letter-spacing: .03em; }
.py-stop-state { padding: 3px 8px; border-radius: 20px; background: #edf2eb; color: #5e7262; font-size: .7rem; font-weight: 700; }
.py-stop-card[data-state="completed"] .py-stop-state { background: #ddf3e5; color: #226947; }
.py-stop-card[data-next="true"] .py-stop-state { background: #f0e8fa; color: #6b4d94; }
.prose .py-roadtrip .py-stop-card h3 { margin: 12px 0 8px; border: 0; padding: 0; color: #2a4538; font-size: 1.15rem; line-height: 1.4; }
.prose .py-roadtrip .py-stop-card p { margin: 0 0 8px; font-size: .88rem; line-height: 1.55; color: #596d60; }
.py-stop-progress { margin: 14px 0; color: #56715f; font-size: .78rem; font-weight: 600; }
.py-stop-meter { height: 6px; margin-top: 7px; overflow: hidden; border-radius: 10px; background: #e7eee4; }
.py-stop-meter > span { display: block; width: 0; height: 100%; border-radius: inherit; background: #67ad87; }
.prose .py-roadtrip summary { padding: 4px 0; color: #5a6a60; font-size: .8rem; font-weight: 600; cursor: pointer; }
.prose .py-roadtrip details[open] summary { margin-bottom: 10px; }
.prose .py-roadtrip details ul { margin: 10px 0; padding-left: 20px; font-size: .85rem; line-height: 1.6; }
.prose .py-roadtrip .py-stop-link { margin-top: 12px; padding: 8px 12px; }
/* Extend the real link across the card, preserving native keyboard/new-tab behavior. */
.prose .py-roadtrip .py-stop-link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 16px; }
.prose .py-roadtrip .py-stop-card details { position: relative; z-index: 2; }
.prose .py-roadtrip .py-stop-card:has(.py-stop-link:hover),
.prose .py-roadtrip .py-stop-card:has(.py-stop-link:focus-visible) { outline: 3px solid #7e5dab; outline-offset: 3px; }
.py-roadtrip a:focus-visible, .py-roadtrip summary:focus-visible { outline: 3px solid #7e5dab; outline-offset: 3px; }
.prose .py-roadtrip .py-trip-journey[data-compact="true"] .py-trip-stops { padding: 76px 14px 100px 78px; gap: 28px; }
.prose .py-roadtrip .py-trip-journey[data-compact="true"] .py-stop-card { width: 100%; padding: 16px; }
.py-trip-journey[data-compact="true"] [data-trip-road-layer] { stroke-width: 2px; }
.py-trip-journey[data-compact="true"] [data-trip-road-layer]:nth-child(1) { stroke-width: 38px; }
.py-trip-journey[data-compact="true"] [data-trip-road-layer]:nth-child(2) { stroke-width: 34px; }
.py-trip-journey[data-compact="true"] [data-trip-road] { stroke-width: 28px; }
.py-trip-journey[data-compact="true"] [data-trip-trail] { stroke-width: 5px; }
@media (max-width: 640px) {
  .py-trip-header { padding: 18px; flex-wrap: wrap; }
  .py-trip-counter { display: flex; align-items: center; gap: 12px; padding: 7px 12px; }
  .py-trip-counter strong { font-size: 1.3rem; }
  .py-trip-toolbar { padding: 16px; }
  .prose .py-roadtrip .py-trip-help { padding: 14px 16px 0; }
}
.py-learning-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 24px 0; }
.prose .py-learning-choice { display: flex; flex-direction: column; gap: 10px; padding: 22px; border: 2px solid var(--border); border-radius: 16px; background: var(--surface); color: var(--text-2); text-decoration: none; font-size: .9rem; line-height: 1.6; }
.prose .py-learning-choice:hover, .prose .py-learning-choice[aria-selected="true"] { border-color: var(--purple); background: var(--purple-bg); color: var(--text); }
.py-choice-label { color: var(--text); font-size: 1.1rem; font-weight: 800; line-height: 1.4; }
.py-choice-hint { margin-top: auto; color: var(--purple); font-weight: 700; }
.py-learning-choice:focus-visible { outline: 3px solid var(--purple); outline-offset: 3px; }
[data-learning-panel] { scroll-margin-top: calc(var(--nav-h) + 20px); }
[data-learning-panel][hidden] { display: none !important; }
@media (max-width: 640px) {
  .py-learning-choices { grid-template-columns: 1fr; gap: 12px; }
  .prose .py-learning-choice { padding: 16px; }
}