/* Kept for existing event share pages, which also load this stylesheet. */
.relation-install{display:block;margin:18px auto;color:#f4473b;font-size:16px;font-weight:700;text-align:center;text-decoration:none}

.relation-page{--relation-ink:#172421;--relation-muted:#68726f;--relation-coral:#f4473b;--relation-paper:#ffffff;--media-height:300px;--showcase-gap:10px;background:#f7f1e8;color:var(--relation-ink);font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;min-height:100vh}
.relation-page button,.relation-page input{font:inherit}
.relation-page button,.relation-page a,.relation-page input{-webkit-tap-highlight-color:transparent}
.relation-page button{color:inherit}
.relation-page [hidden]{display:none!important}
.relation-page :focus-visible{outline:3px solid #17784d;outline-offset:4px}
.relation-shell{min-height:100vh;min-height:100svh;display:flex;justify-content:center;align-items:center;padding:12px 14px max(10px,env(safe-area-inset-bottom));padding-top:max(12px,env(safe-area-inset-top))}
.relation-invite{width:min(100%,450px);min-width:0;margin:0 auto;padding:14px;border:1px solid #e7ddd2;border-radius:20px;background:var(--relation-paper);box-shadow:0 9px 30px rgba(38,31,25,.07)}
.relation-header{display:flex;align-items:center;justify-content:center;min-height:34px;padding:0 0 11px;border-bottom:1px solid #ded6ca}
.relation-brand{display:block;width:160px;height:auto;max-width:64%;margin:0;aspect-ratio:6/1;object-fit:cover;object-position:center;filter:brightness(1.02)}
.relation-heading{margin:11px 0 12px;min-width:0;text-align:center}
.relation-eyebrow{margin:0 0 6px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:.76rem;font-weight:750;line-height:1.3;letter-spacing:.005em;color:var(--relation-coral)}
.relation-eyebrow span{color:inherit}
.relation-heading h1{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;margin:0;font-size:clamp(1.35rem,6vw,1.7rem);font-weight:760;line-height:1.09;letter-spacing:-.035em;overflow-wrap:anywhere;text-wrap:pretty}
.relation-heading .relation-title{display:flex;align-items:baseline;justify-content:center;gap:5px;width:100%;min-width:0;font-size:clamp(.92rem,4vw,1.1rem);line-height:1.25;letter-spacing:-.025em;white-space:nowrap;overflow:visible;text-wrap:nowrap}
.relation-title-bike,.relation-title-separator,.relation-title time{flex:none}
.relation-title-locality{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.relation-title .relation-title-separator{font-size:.75rem;font-weight:500;color:var(--relation-muted)}
.relation-title time{font-size:.72rem;font-weight:500;letter-spacing:-.01em;color:var(--relation-muted)}
.relation-showcase{width:min(100%,calc(var(--media-height)*1.1625 + var(--showcase-gap)));margin-inline:auto}
.relation-showcase{display:grid;grid-template-columns:calc(var(--media-height)*.5625) minmax(0,1fr);gap:var(--showcase-gap);align-items:stretch;min-width:0}
.relation-media{position:relative;isolation:isolate;width:calc(var(--media-height)*.5625);height:var(--media-height);max-width:100%;overflow:hidden;border-radius:11px;background:#e9e5dc}
.relation-video,.relation-photo{display:block;width:100%;height:100%;object-fit:contain;object-position:center;background:#181c19}
.relation-preview-badge{position:absolute;top:8px;left:8px;z-index:1;max-width:calc(100% - 16px);padding:5px 8px;border:1px solid #ffffffd9;border-radius:999px;background:#fffcf7f0;color:var(--relation-ink);box-shadow:0 1px 6px #1724211a;font-size:clamp(.55rem,2.6vw,.66rem);font-weight:700;line-height:1.15;letter-spacing:.02em;white-space:nowrap;pointer-events:none}
.relation-video[hidden]~.relation-preview-badge,.relation-photo[hidden]~.relation-preview-badge{display:none}
.relation-media-empty{height:100%;width:100%;padding:14px 9px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#7e8274;background:linear-gradient(160deg,#edece2,#e3e7dd)}
.relation-media-empty svg{flex:none;width:35px;height:35px;margin-bottom:9px;opacity:.7}
.relation-media-empty p{margin:0;font-size:.76rem;font-weight:650;line-height:1.35}
.relation-media-empty>span{margin-top:7px;font-size:.61rem;line-height:1.4;max-width:15ch}
.relation-details{display:flex;flex-direction:column;justify-content:space-between;min-width:0;min-height:0;height:var(--media-height);padding:0}
.relation-stats{display:grid;grid-template-rows:repeat(3,minmax(0,1fr));flex:1;gap:6px;margin:0 0 6px;min-height:0}
.relation-stat{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;min-height:0;padding:4px 3px;border:1px solid #e8dfd6;border-radius:9px;background:#fbf8f4;text-align:center}
.relation-stat dd{order:-1;margin:0;font-size:clamp(1.08rem,calc(var(--media-height)*.091),1.9rem);font-weight:800;line-height:1.05;letter-spacing:-.05em;overflow-wrap:anywhere}
.relation-stat dd small{font-size:.74rem;letter-spacing:-.02em;font-weight:700;color:var(--relation-ink)}
.relation-stat dt{margin-top:3px;font-size:.74rem;line-height:1.15;color:var(--relation-muted);overflow-wrap:anywhere}
.relation-route{display:flex;align-items:center;justify-content:center;flex:none;width:100%;height:auto;aspect-ratio:1;position:relative;overflow:hidden;border-radius:8px;background:#efeee5;text-align:center;text-decoration:none;color:#7e8274}
.relation-route img{display:block;width:100%;height:100%;object-fit:cover}
.relation-map-image{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.relation-map-attribution{position:absolute;bottom:0;right:0;max-width:100%;padding:0 2px;background:#ffffffed;color:#254d3e;font-size:8px;line-height:1.1;text-decoration:none;text-align:right}
.relation-map-attribution:hover{text-decoration:underline}
.relation-route span{font-size:.7rem;line-height:1.35;padding:5px}
.relation-controls{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:8px;width:100%;min-height:37px;padding-top:3px}
.relation-timeline{display:grid;grid-template-columns:31px minmax(0,1fr);align-items:center;column-gap:8px;min-width:0}
.relation-play,.relation-sound{border:0;padding:0;background:none;display:flex;align-items:center;justify-content:center;cursor:pointer;min-height:34px}
.relation-play{width:29px;min-height:29px;border-radius:50%;color:#fff!important;background:var(--relation-ink)}
.relation-play svg{width:17px;height:17px}
.relation-play .icon-pause,.relation-play .icon-replay{display:none}
.relation-play.is-playing .icon-play{display:none}
.relation-play.is-playing .icon-pause{display:block}
.relation-play.is-ended .icon-play,.relation-play.is-ended .icon-pause{display:none}
.relation-play.is-ended .icon-replay{display:block}
.relation-sound{gap:5px;white-space:nowrap;font-size:.72rem;font-weight:600;padding-left:7px;min-width:0}
.relation-sound svg{width:19px;height:19px;flex:none}
.relation-sound .sound-speaker{transform:translateX(5px)}
.relation-sound[aria-pressed="true"] .sound-speaker{transform:none}
.relation-sound .sound-waves{display:none}
.relation-sound[aria-pressed="true"] .sound-waves{display:block}
.relation-sound[aria-pressed="true"] .sound-slash{display:none}
.relation-controls button:disabled{opacity:.48;cursor:default}
.relation-progress{--progress:0%;appearance:none;-webkit-appearance:none;display:block;width:100%;min-width:0;height:28px;margin:0;background:transparent;cursor:pointer;accent-color:var(--relation-ink)}
.relation-progress::-webkit-slider-runnable-track{height:3px;border-radius:3px;background:linear-gradient(to right,var(--relation-ink) var(--progress),#d9d7cc var(--progress))}
.relation-progress::-moz-range-track{height:3px;border-radius:3px;background:#d9d7cc}
.relation-progress::-moz-range-progress{height:3px;background:var(--relation-ink)}
.relation-progress::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:9px;height:9px;border-radius:50%;margin-top:-3px;background:var(--relation-ink)}
.relation-progress::-moz-range-thumb{width:9px;height:9px;border:0;border-radius:50%;background:var(--relation-ink)}
.relation-progress:disabled{opacity:.4;cursor:default}
.relation-player-status{margin:0;color:var(--relation-muted);font-size:.67rem;line-height:1.35;text-align:center}
.relation-player-status:empty{display:none}
.relation-no-script{font-size:.7rem;line-height:1.4}
.relation-copy{margin:11px 0 12px;text-align:center}
.relation-copy h2{margin:0 0 5px;font-size:clamp(1rem,4.55vw,1.22rem);font-weight:750;line-height:1.2;letter-spacing:-.035em}
.relation-copy p{max-width:33ch;margin:0 auto;color:var(--relation-muted);font-size:.82rem;line-height:1.35;text-wrap:pretty}
.relation-primary{display:flex;align-items:center;justify-content:center;min-height:48px;width:100%;padding:10px 12px;border-radius:10px;background:var(--relation-coral);color:#fff;font-size:.96rem;font-weight:750;line-height:1.25;text-align:center;text-decoration:none;box-shadow:0 2px 0 rgba(104,45,28,.06)}
.relation-primary:hover{background:#e6513f}
.relation-open{display:flex;align-items:center;justify-content:center;gap:6px;min-height:34px;font-size:.79rem;font-weight:700;color:#087443;text-underline-offset:3px;text-decoration:none}
.relation-music-trigger{display:block;width:100%;border:0;border-top:1px solid #e7ddd2;background:none;padding:6px 9px 0;margin:2px auto 0;min-height:25px;color:var(--relation-muted)!important;font-size:.72rem!important;text-decoration:none;cursor:pointer}
.relation-unavailable{max-width:370px}
.relation-unavailable .relation-heading{margin:26px 0 12px}
.relation-unavailable-copy{margin:0 0 26px;color:var(--relation-muted);font-size:.95rem;line-height:1.5}
.relation-music-dialog{width:min(90vw,430px);max-height:80vh;max-height:80dvh;padding:0;border:1px solid #e2daca;border-radius:16px;color:var(--relation-ink);background:var(--relation-paper);box-shadow:0 18px 80px #11251e33;overflow:hidden}
.relation-music-dialog::backdrop{background:#15261d88}
.relation-music-dialog[open]{display:flex;flex-direction:column}
.relation-music-dialog-header{display:flex;flex:none;align-items:center;justify-content:space-between;gap:12px;padding:12px 12px 10px 20px;border-bottom:1px solid #e2daca}
.relation-music-dialog-header h2{font-size:1rem;line-height:1.3;margin:0}
.relation-music-close{display:grid;place-items:center;flex:none;width:44px;min-height:44px;font-size:1.6rem!important;border:0;background:none;border-radius:8px;cursor:pointer}
.relation-music-content{padding:6px 20px 18px;overflow-y:auto;overscroll-behavior:contain;font-size:.85rem;line-height:1.55;overflow-wrap:anywhere}
.relation-music-content p{margin:12px 0}
.relation-music-content h3{font-size:.85rem;margin:22px 0 10px}
.relation-music-content a{color:#087443;text-underline-offset:3px}
.relation-page .shared-music-attribution{white-space:pre-line}
@media(min-width:600px){.relation-shell{padding:24px 28px}.relation-invite{padding:20px}.relation-header{padding-bottom:13px}.relation-copy{margin-top:15px}.relation-primary{min-height:50px}}
@media(max-height:680px){.relation-shell{padding-top:max(7px,env(safe-area-inset-top));padding-bottom:max(7px,env(safe-area-inset-bottom))}.relation-invite{padding:11px 13px}.relation-header{min-height:29px;padding-bottom:8px}.relation-brand{width:145px}.relation-heading{margin:9px 0}.relation-eyebrow{margin-bottom:4px;font-size:.73rem}.relation-heading h1{font-size:1.34rem}.relation-stats{gap:4px;margin-bottom:4px}.relation-stat{padding:3px 2px}.relation-stat dt{margin-top:2px;font-size:.7rem}.relation-stat dd small{font-size:.7rem}.relation-controls{min-height:35px;padding-top:2px}.relation-copy{margin:8px 0 10px}.relation-copy h2{font-size:1rem;margin-bottom:4px}.relation-copy p{font-size:.77rem;line-height:1.3}.relation-primary{min-height:48px}.relation-open{min-height:32px}.relation-music-trigger{min-height:24px;font-size:.7rem!important}}
@media(max-width:340px){.relation-shell{padding-left:9px;padding-right:9px}.relation-invite{padding-left:11px;padding-right:11px}.relation-page{--showcase-gap:8px}.relation-heading h1{font-size:1.23rem}.relation-copy h2{font-size:.94rem}.relation-timeline,.relation-controls{column-gap:5px}.relation-sound{font-size:.68rem;padding-left:3px}}
@media(prefers-reduced-motion:reduce){.relation-page *{scroll-behavior:auto}}

@media(max-height:610px){.relation-stats{gap:4px;margin-bottom:4px}.relation-stat{flex-direction:row;justify-content:space-between;gap:3px;padding:2px 3px}.relation-stat dd{font-size:.98rem;white-space:nowrap}.relation-stat dd small{font-size:.62rem}.relation-stat dt{margin-top:0;font-size:.63rem;line-height:1.12;text-align:right}}