/* rt-user.css — this app's own touches on top of the theme. It sits outside every layer, so it wins without !important. */

/* the site's link colour is for text; the navigation is quieter, so the page you are on stands out */
.rt-nav a { color: var(--rt-text); }
.rt-nav a[aria-current] { color: color-mix(in oklab, var(--rt-accent) 80%, var(--rt-text)); }       /* the accent, a little toward the text colour: 4.5:1 on the selected background in dark mode too */

/* the taxi trip in its window (ds/trip) */
.trip__facts { display: grid; grid-template-columns: 10rem 1fr; gap: .4rem 1rem; margin: 1rem 0 0; }
.trip__facts dt { color: var(--rt-muted); }
.trip__facts dd { margin: 0; }
.trip__route { margin: 0 0 .6rem; }
.trip__note { margin: .4rem 0 0; font-size: .8125rem; }

/* what the data says, in this app's own words (demo/styleguide):
   a tone of our own: the theme knows six, any other plain word is for a stylesheet like this one */
[data-tone="gold"] { --rt-tone: #b7791f; }
/* a level: a number from the data (--rt-level, here 0 to 100), turned into a colour by the stylesheet: a gradient from green to red */
.rt-value--heat { background: color-mix(in oklch, var(--rt-danger) clamp(0%, calc(var(--rt-level, 0) * 1%), 100%), var(--rt-positive)); color: #111; }

/* the legend of the choropleth module (assets/modules/choropleth.js): a swatch and the numbers it stands for, in a row that wraps */
.rt-choropleth__legend { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin-top: .5rem; font-size: .8125rem; color: var(--rt-muted); }
.rt-choropleth__key { display: inline-flex; align-items: center; gap: .35rem; }
.rt-choropleth__key i { display: inline-block; width: 1.1rem; height: .7rem; border-radius: 2px; border: 1px solid var(--rt-border); }

/* the legend of the annotated lines module (assets/modules/annotatedLines.js) */
.rt-annotated__legend { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin-top: .5rem; font-size: .8125rem; color: var(--rt-muted); }
.rt-annotated__key { display: inline-flex; align-items: center; gap: .35rem; }
.rt-annotated__key i { display: inline-block; width: 1.1rem; height: .25rem; border-radius: 2px; }