/* RunRoam: approved Pace wordmark and RR route mark. */
.runroam-brand { display: inline-flex; align-items: center; flex: none; direction: ltr; padding: 6px 0; }
.runroam-logo { display: block; width: 180px; height: auto; max-width: 100%; }
.nav .runroam-brand { gap: 0; }
.brand .runroam-brand { padding: 4px 0; }
.brand .runroam-logo { width: 184px; }
.brand .brand-text { min-width: 0; }
.brand .brand-text p { margin-top: 4px; }
.runroam-footer-mark { display: block; flex: none; border-radius: 7px; background: #f7f4eb; }
@media (max-width: 600px) {
 .nav .runroam-logo { width: 144px; }
 .nav .runroam-brand { padding: 5px 0; }
 .brand .runroam-logo { width: 166px; }
}
@media (max-width: 360px) {
 .nav .runroam-logo { width: 124px; }
 .brand .runroam-logo { width: 150px; }
}

/* No logo background. Only the endpoint colour changes on dark surfaces. */
.runroam-logo-dark { display: none; }
:root[data-theme="dark"] .runroam-logo-light { display: none; }
:root[data-theme="dark"] .runroam-logo-dark { display: block; }
.nav:not(.scrolled) .runroam-logo-light { display: none; }
.nav:not(.scrolled) .runroam-logo-dark { display: block; }
@media (prefers-color-scheme: dark) {
 :root:not([data-theme="light"]) .runroam-logo-light { display: none; }
 :root:not([data-theme="light"]) .runroam-logo-dark { display: block; }
}

/* Match the image's visible bounds, not its old export canvas. */
.runroam-brand { padding: 0; line-height: 1; }
.brand { align-items: center; justify-content: space-between; }
.brand .runroam-brand { padding: 0; }
.brand .brand-text h1 { margin: 0; line-height: 1; }
.brand .brand-text p { margin: 6px 0 0; text-align: right; }
.brand .welcome-help { margin-inline-start: auto; flex: none; }
.nav .runroam-brand { padding: 0; }
.nav-actions { align-items: center; }

/* Hebrew starts on the right, directly beneath the final m's visible edge. */
.brand .brand-text { display: flex; flex-direction: column; align-items: stretch; --brand-width: 184px; }
.brand .brand-text p { text-align: right; align-self: stretch; padding-right: calc(var(--brand-width) * 0.0195652174); }
@media (max-width: 600px) { .brand .brand-text { --brand-width: 166px; } }
@media (max-width: 360px) { .brand .brand-text { --brand-width: 150px; } }