/* Guided journeys (v3/journey.js). Theme tokens only; status with a glyph and a label, never color alone. */
.jr-bar { height: 8px; border-radius: 4px; background: var(--v-track); overflow: hidden; margin: 6px 0 2px; }
.jr-bar > span { display: block; height: 100%; border-radius: 4px; background: var(--v-s1); }
.jr-top { display: flex; gap: 16px; flex-wrap: wrap; align-items: stretch; }
.jr-tot { flex: 1 1 220px; min-width: 0; }
.jr-big { font-size: 28px; line-height: 1.1; font-weight: 600; font-variant-numeric: tabular-nums; }
.jr-nba { flex: 1 1 260px; min-width: 0; padding: 10px 12px; border-radius: 10px; background: var(--panel2); border-left: 3px solid var(--v-s1); display: flex; flex-direction: column; gap: 4px; }
.jr-lane { margin: 6px 0 16px; }
.jr-lh { margin-bottom: 8px; overflow-wrap: anywhere; }
.jr-map { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.jr-ms { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.jr-ms.jr-active { border-color: var(--v-s1); }
.jr-ms.jr-done .jr-bar > span { background: var(--v-good); }
.jr-mh { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.jr-n { display: inline-flex; width: 20px; height: 20px; border-radius: 50%; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; background: var(--line); color: var(--ink2); }
.jr-next { margin-top: 4px; overflow-wrap: anywhere; }
.jr-tog { align-self: flex-start; margin-top: 4px; padding: 2px 6px; font-size: 12px; }
.jr-cl { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.jr-cl li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 2px 6px; align-items: start; }
.jr-cl li > .tag { grid-column: 2; justify-self: start; }
.jr-cl li.done .jr-sl { color: var(--ink2); }
.jr-ck { color: var(--mute); } .jr-cl li.done .jr-ck { color: var(--v-good); }
.jr-quiz { display: flex; flex-direction: column; gap: 10px; }
.jr-q { border: 0; margin: 0; padding: 0; min-width: 0; }
.jr-opts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.jr-opts .chip { white-space: normal; text-align: left; }
.jr-route { margin-top: 12px; padding: 8px 10px; border-radius: 8px; background: var(--panel2); overflow-wrap: anywhere; }
.jr-est { margin-bottom: 8px; }
.jr-sum { display: flex; gap: 24px; flex-wrap: wrap; margin-bottom: 10px; }
.jr-sum > div { min-width: 0; flex: 1 1 180px; }
.jr-in { width: 90px; max-width: 100%; }
.jr-tw { overflow-x: auto; max-width: 100%; margin: 10px 0 6px; }
.jr-t { border-collapse: collapse; font-size: 13px; width: 100%; min-width: 520px; }
.jr-t th, .jr-t td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; font-variant-numeric: tabular-nums; }
.jr-t thead th { font-weight: 500; color: var(--ink2); }
@media (max-width: 620px) { .jr-map { grid-template-columns: minmax(0, 1fr); } .jr-big { font-size: 24px; } }
[data-jr="pick"] { flex-wrap: wrap; }
[data-jr="pick"] .chip { white-space: normal; text-align: left; }
.jr, [data-jr="insights"], [data-jr="insights"] > .card, [data-jr="journey"], [data-jr="journey"] > .card { min-width: 0; max-width: 100%; }