.record-journey{container-type:inline-size;background:rgb(var(--surface));border:1px solid rgb(var(--border));border-radius:12px;padding:16px;margin:0 0 18px;color:rgb(var(--text));font-family:var(--font-family)}
.record-journey-heading{display:flex;align-items:baseline;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.record-journey-heading h2{font-size:var(--font-body);font-weight:600;margin:0}
.record-journey-heading>span,.record-journey-note{font-size:var(--font-helper);color:rgb(var(--muted))}
.record-journey ol{list-style:none;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));padding:2px 0 8px;margin:0;gap:16px 0}
.record-journey li{position:relative;display:flex;min-width:0;flex-direction:column;align-items:center;text-align:center;gap:7px;font-size:var(--font-helper);color:rgb(var(--muted));padding:0 4px;overflow-wrap:anywhere}
.record-journey li:not(:last-child):after{content:'';position:absolute;top:12px;left:calc(50% + 17px);right:calc(-50% + 17px);border-top:1px solid rgb(var(--border))}
.journey-dot{display:flex;align-items:center;justify-content:center;width:25px;height:25px;border:1px solid rgb(var(--border));border-radius:50%;background:rgb(var(--surface));font-weight:600;flex-shrink:0}
.journey-label{font-weight:500;line-height:1.4}
.journey-label small{display:block;font-size:var(--font-helper);margin-top:3px;font-weight:400}
.record-journey .journey-complete{color:rgb(var(--success))}
.journey-complete .journey-dot{background:rgb(var(--success) / .08);border-color:rgb(var(--success) / .3)}
.record-journey .journey-current{color:rgb(var(--primary));font-weight:600}
.journey-current .journey-dot{background:rgb(var(--primary));color:rgb(var(--on-primary));border-color:rgb(var(--primary));box-shadow:0 0 0 3px rgb(var(--primary) / .12)}
.record-journey .journey-skipped{color:rgb(var(--muted))}
.journey-skipped .journey-dot{background:rgb(var(--canvas));border-color:rgb(var(--border))}
.record-journey-note{margin:10px 0 0;line-height:1.5}
@container(max-width:640px){.record-journey ol{grid-template-columns:repeat(4,minmax(0,1fr))}.record-journey li:after{display:none}}
@container(max-width:350px){.record-journey ol{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:600px){.record-journey{padding:12px}.record-journey-heading{align-items:flex-start}}
@media print{.record-journey ol{overflow:visible;flex-wrap:wrap}.record-journey li{min-width:80px}.record-journey li:after{display:none}}