/* Daily Rider: the invitation in magazine articles, for visitors (1.9.0). A short line half-way through and a
   panel at the end, in the look of the community's join band (blue over the riding photo). Articles do not
   load the community's other styles, so this file carries what it needs. */

@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/barlow-condensed-700-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

.drc-join { box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
.drc-join *, .drc-join *::before, .drc-join *::after { box-sizing: border-box; }
.drc-join p { margin: 0; }

.drc-join__faces { display: inline-flex; flex: none; }
.drc-join__faces img { display: block; width: 36px; height: 36px; margin-left: -10px; border: 2px solid #fff; border-radius: 50%; object-fit: cover; background: #e7f0f9; }
.drc-join__faces img:first-child { margin-left: 0; }

.drc-join__btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 11px 20px; border: 1px solid #106abf; border-radius: 3px; background: #106abf; color: #fff !important; font-size: 15px; font-weight: 600; line-height: 1.2; text-decoration: none !important; white-space: nowrap; transition: background-color .15s ease, transform .08s ease; }
.drc-join__btn:hover { background: #00509d; border-color: #00509d; }
.drc-join__btn:active { transform: scale(.97); }

/* Half-way: one quiet line. */
.drc-join--line { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 32px 0; padding: 16px 18px; border: 1px solid #e1e4e7; border-left: 3px solid #106abf; border-radius: 5px; background: #f4f5f6; }
.drc-join__line { flex: 1 1 240px; min-width: 0; color: #111; font-size: 16px; font-weight: 600; line-height: 1.45; }

/* At the end: the community's join band. */
.drc-join--panel { margin: 48px 0 8px; padding: 34px 36px 30px; border-radius: 5px; background: linear-gradient(90deg, rgba(16, 106, 191, .97) 0%, rgba(16, 106, 191, .92) 55%, rgba(16, 106, 191, .7) 100%), #106abf url(auth-bear-650.webp) right center / cover no-repeat; color: #fff; }
.drc-join__eyebrow { color: rgba(255, 255, 255, .85); font-size: 13px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; }
.drc-join--panel .drc-join__title { margin: 6px 0 0 !important; padding: 0; color: #fff !important; font-family: "Barlow Condensed", "Arial Narrow", Arial, sans-serif !important; font-size: 40px !important; font-weight: 700 !important; line-height: 1 !important; letter-spacing: 0 !important; text-transform: uppercase; }
.drc-join__text { max-width: 560px; margin-top: 12px !important; color: rgba(255, 255, 255, .92); font-size: 17px; line-height: 1.55; }
.drc-join__proof { display: flex; align-items: center; gap: 12px; margin-top: 18px !important; color: #fff; font-size: 15px; font-weight: 600; line-height: 1.4; }
.drc-join--panel .drc-join__faces img { border-color: #106abf; }
/* 1.10.5 (Jean: "a bit out of line and all over the place, can we neaten up the alignment?"): one left edge.
   The two buttons share a row at Google's 40px height; the Google note runs under both, left-aligned, instead
   of centred under the Google button alone. The Google wrapper steps aside (display: contents) so its button,
   status and note sit in the panel's grid; when Google cannot load, the wrapper is hidden and the email button
   stands alone on the left. */
.drc-join__actions { display: grid; grid-template-columns: auto auto; justify-content: start; align-items: center; gap: 10px 12px; margin-top: 22px; }
.drc-join__google { display: contents; }
.drc-join__google[hidden] { display: none; }
.drc-join__google .drc-google__button { grid-column: 1; grid-row: 1; display: flex; justify-content: flex-start; width: 320px; min-height: 40px; }
.drc-join__google .drc-google__button > div { margin: 0; }
.drc-join__google .drc-google__button iframe { max-width: none; }
.drc-join__actions:has(.drc-join__google:not([hidden])) .drc-join__btn--email { grid-column: 2; grid-row: 1; }
.drc-join__google .drc-google__status { grid-column: 1 / -1; color: #fff; font-size: 13px; text-align: left; }
.drc-join__google .drc-google__status:empty { display: none; }
.drc-join__google .drc-google__consent { grid-column: 1 / -1; margin: 0 !important; color: rgba(255, 255, 255, .85); font-size: 12px; line-height: 1.45; text-align: left; }
.drc-join__google .drc-google__consent a { color: #fff; text-decoration: underline; }
.drc-join--panel .drc-join__btn--email { height: 40px; min-height: 40px; padding: 0 20px; border-color: #fff; background: #fff; color: #106abf !important; }
.drc-join--panel .drc-join__btn--email:hover { background: #e7f0f9; border-color: #e7f0f9; }
.drc-join__login { margin-top: 18px !important; color: rgba(255, 255, 255, .9); font-size: 14px; }
.drc-join__login a { color: #fff !important; font-weight: 600; text-decoration: underline; }

@media (max-width: 600px) {
	.drc-join--line { padding: 14px; }
	.drc-join--line .drc-join__btn { width: 100%; }
	.drc-join--panel { padding: 26px 20px 24px; }
	.drc-join--panel .drc-join__title { font-size: 32px !important; }
	.drc-join__text { font-size: 16px; }
	.drc-join__actions { grid-template-columns: minmax(0, 1fr); justify-content: stretch; }
	.drc-join__google .drc-google__button { width: auto; }
	.drc-join__actions:has(.drc-join__google:not([hidden])) .drc-join__btn--email { grid-column: 1; grid-row: 2; }
	.drc-join--panel .drc-join__btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
	.drc-join__btn:active { transform: none; }
}

/* ---------- 1.13.0: a rider's invite, /join/<name>/ (the welcome page their link opens) ---------- */

.drc-invpage { display: flex; flex-direction: column; gap: 20px; max-width: 1100px; margin: 0 auto; }
.drc-invhero { position: relative; isolation: isolate; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px 40px; min-height: 340px; padding: 44px; overflow: hidden; border-radius: var(--dr-r-card); background: #000; color: #fff; }
.drc-invhero__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 60% 45%; }
.drc-invhero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(0, 0, 0, .88), rgba(0, 0, 0, .55) 55%, rgba(0, 0, 0, .25)), linear-gradient(0deg, rgba(0, 0, 0, .55), transparent 60%); }
.drc-invhero__who { display: flex; flex: 1 1 420px; align-items: center; gap: 22px; min-width: 0; }
.drc .drc-invhero__av.drc-av { --s: 112px; flex: none; border: 4px solid #fff; }
.drc-invhero__text { min-width: 0; }
.drc .drc-invhero__eyebrow { margin: 0 0 8px; color: #8cc4ff; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.drc .drc-invhero__title { margin: 0; padding: 0; color: #fff; font-family: var(--dr-display); font-size: 52px; font-weight: 700; line-height: .98; letter-spacing: 0; text-transform: uppercase; }
.drc-invhero__nb { white-space: nowrap; }
.drc .drc-invhero__meta { margin: 10px 0 0; color: rgba(255, 255, 255, .85); font-size: 15px; line-height: 1.45; }
.drc .drc-invhero__meta a { color: #fff; font-weight: 600; }
.drc .drc-invhero__meta a:hover { text-decoration: underline; }
/* Google, then email, then Log in; Google's consent note last (its wrapper steps aside, as in the article panel). */
.drc-invhero__cta { display: flex; flex: none; flex-direction: column; gap: 10px; width: 320px; }
.drc .drc-invhero__google { display: contents; }
.drc-invhero__google .drc-google__button { display: flex; justify-content: center; min-height: 44px; }
.drc-invhero__google .drc-google__button iframe { max-width: none; }
.drc-invhero__google .drc-google__status:empty { display: none; }
.drc .drc-invhero__google .drc-google__status { margin: 0; color: #fff; font-size: 13px; text-align: center; }
.drc .drc-invhero__google .drc-google__consent { order: 3; margin: 2px 0 0; color: rgba(255, 255, 255, .72); font-size: 12px; line-height: 1.45; text-align: center; }
.drc .drc-invhero__google .drc-google__consent a { color: #fff; text-decoration: underline; }
.drc .drc-invhero__email { order: 1; justify-content: center; width: 100%; min-height: 44px; }
.drc .drc-invhero__login { order: 2; margin: 2px 0 0; color: rgba(255, 255, 255, .82); font-size: 14px; text-align: center; }
.drc .drc-invhero__login a { color: #fff; text-decoration: underline; }
.drc .drc-invhero__closed { margin: 0; color: #fff; font-size: 15px; font-weight: 600; text-align: center; }

.drc-invtiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.drc .drc-invtile { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 24px 22px; }
.drc-invtile__ico { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 8px; border-radius: 50%; background: var(--dr-accent-soft); color: var(--dr-accent); }
.drc .drc-invtile__title { margin: 0; padding: 0; color: var(--dr-ink); font-family: var(--dr-font); font-size: 17px; font-weight: 700; line-height: 1.3; letter-spacing: 0; text-transform: none; }
.drc .drc-invtile__text { margin: 0; color: var(--dr-muted); font-size: 15px; line-height: 1.5; }

@media (max-width: 900px) {
	.drc-invhero { align-items: stretch; }
	.drc-invhero__cta { width: 100%; max-width: 420px; }
}
@media (max-width: 760px) {
	.drc-invpage { gap: 16px; }
	.drc-invhero { gap: 24px; min-height: 0; padding: 26px 20px 22px; }
	/* The photo above the words, so the title has the full width (beside it, "YOU" stood alone on a line). */
	.drc-invhero__who { flex-basis: 100%; flex-direction: column; align-items: flex-start; gap: 16px; }
	.drc .drc-invhero__av.drc-av { --s: 76px; border-width: 3px; }
	.drc .drc-invhero__title { font-size: 34px; }
	.drc .drc-invhero__meta { font-size: 14px; }
	.drc-invhero__cta { max-width: none; }
	.drc-invtiles { grid-template-columns: 1fr; gap: 12px; }
	.drc .drc-invtile { padding: 20px 18px; }
}

/* 1.14.0: phones take the 800px riding photo (49 KB; the full one is 177 KB). */
@media (max-width: 720px) {
	.drc-join--panel { background-image: linear-gradient(90deg, rgba(16, 106, 191, .97) 0%, rgba(16, 106, 191, .92) 55%, rgba(16, 106, 191, .7) 100%), url(auth-bear-800.webp); }
}