/* Ride recap (docs/architecture.md 18): the app's /t/<slug>/recap screen and the public /r/<token> page share this file
   and the markup from js/recappage.js. Day color: --dc (stroke) and --dci (text on light). */
.rc { max-width: 1040px; margin: 0 auto; padding: 0 0 24px }
.rc a { color: var(--county) }
.rc-cover { position: relative; min-height: 300px; display: grid; align-items: end; color: #fff; background: var(--guide); overflow: hidden }
.rc-coverimg { position: absolute; inset: 0 }
.rc-coverimg img { width: 100%; height: 100%; object-fit: cover }
.rc-cover:not(.noimg)::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,16,22,0) 25%, rgba(10,16,22,.78)) }
.rc-covertext { position: relative; z-index: 1; padding: 64px 20px 22px; display: grid; gap: 8px }
.rc-eye { font: 700 13px/1.2 var(--font-mono); letter-spacing: .14em; text-transform: uppercase }
.rc h1 { font-size: clamp(36px, 7vw, 64px); text-shadow: 0 2px 12px rgba(0,0,0,.35) }
.rc-totals { display: flex; flex-wrap: wrap; gap: 6px 28px; margin: 4px 0 0 }
.rc-totals div { display: grid }
.rc-totals dt { order: 2; font: 600 12px/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; opacity: .9 }
.rc-totals dd { margin: 0; font: 900 30px/1.05 var(--font-display) }
.rc-totals dd small { font-size: .55em }
.rc-riders { font: 600 16px/1.3 var(--font-display); opacity: .95 }
.rc-covercred { position: absolute; z-index: 1; top: 8px; right: 12px; font-size: 11px; opacity: .85; text-shadow: 0 1px 3px rgba(0,0,0,.6) }
.rc-covercred a { color: #fff }
.rc-pace { margin: 16px; padding: 12px 16px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--rule); border-left: 6px solid var(--guide); font-size: 16px }
.rc-day { margin: 18px 16px 0; padding: 16px; background: var(--surface); border: 1px solid var(--rule); border-top: 6px solid var(--dc); border-radius: var(--radius); display: grid; gap: 14px }
.rc-day.none { opacity: .8 }
.rc-day h2 { font-size: clamp(24px, 4vw, 34px) }
.rc-dayeye { font: 700 13px/1.2 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dci, var(--ink-2)) }
.rc-alt { background: var(--signal); color: #141D27; padding: 2px 6px; border-radius: 4px }
.rc-muted { color: var(--ink-3) }
.rc-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 0; border-top: 3px solid var(--dc) }
@media (min-width: 640px) { .rc-stats { grid-template-columns: repeat(4, minmax(0, 1fr)) } }
.rc-stats div { padding: 10px 8px 10px 0; border-bottom: 1px solid var(--rule) }
.rc-stats dt { font: 700 12px/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3) }
.rc-stats dd { margin: 2px 0 0; font: 800 26px/1.1 var(--font-mono); letter-spacing: -0.02em; color: var(--ink) }
.rc-stats dd small { font-size: .5em; letter-spacing: 0; margin-left: 3px; color: var(--ink-2) }
.rc-map { margin: 0 }
.rc-mapbox { position: relative; border-radius: 12px; overflow: hidden; background: var(--sunk) }
.rc-mapbox img { width: 100%; height: 100%; display: block }
.rc-mapbox svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none }
.rc-trk { fill: none; stroke-width: 4px; stroke-dasharray: 9px 6px; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 1.5px #fff) }
.rc-cam { position: absolute; transform: translate(-50%, -50%); width: 24px; height: 24px; border-radius: 50%; background: #141D27; color: #fff; border: 2px solid #fff; display: grid; place-items: center; font: 800 12px/1 var(--font-mono); box-shadow: 0 1px 4px rgba(0,0,0,.4) }
.rc-map figcaption { margin-top: 6px; font-size: 14px; color: var(--ink-2) }
.rc-legend { display: flex; flex-wrap: wrap; gap: 4px 14px }
.rc-legend span { display: inline-flex; align-items: center; gap: 6px }
.rc-legend i { width: 22px; height: 5px; border-radius: 3px; display: inline-block }
.rc-legend i.plan { background: var(--dc) }
.rc-wx { font-size: 15px; color: var(--ink-2) }
.rc-tablewrap { overflow-x: auto }
.rc-table { width: 100%; border-collapse: collapse; font-size: 15px }
.rc-table th { text-align: left; font: 700 12px/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); padding: 6px 8px 6px 0; border-bottom: 2px solid var(--rule) }
.rc-table td { padding: 8px 8px 8px 0; border-bottom: 1px solid var(--rule); vertical-align: top }
.rc-table td small { display: block; color: var(--ink-3); font-size: 13px }
.rc-table .num { font-family: var(--font-mono); white-space: nowrap }
.rc-table tr.skipped b { text-decoration: line-through; color: var(--ink-3) }
.rc-d.late { color: var(--no) }
.rc-d.early { color: var(--ok) }
.rc-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px }
.rc-photos figure { margin: 0; display: grid; gap: 4px }
.rc-ph { display: block; padding: 0; border: 0; background: var(--sunk); border-radius: 10px; overflow: hidden; cursor: zoom-in }
.rc-ph img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block }
.rc-photos figcaption { font-size: 13px; color: var(--ink-2); overflow-wrap: anywhere }
.rc-foot { margin: 20px 16px 0; font-size: 13px; color: var(--ink-3) }
.rc-acts { display: grid; gap: 12px; padding-top: 18px; padding-bottom: 24px }
@media (min-width: 900px) { .rc-day { margin: 20px 24px 0; padding: 20px 24px } .rc-pace, .rc-foot { margin-left: 24px; margin-right: 24px } }
.rc-public { padding-bottom: 32px }
.rc-brand { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 1040px; margin: 0 auto; padding: 10px 16px; font: 700 14px/1 var(--font-display); color: var(--ink-2) }
.rc-brand a { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; font-weight: 900; font-size: 18px }