/* site-type: css/typography.css, css/components/password-fields.css */

/* ---- css/typography.css ---- */
/*
 * TrailTrack semantic type scale.
 * Mobile-first responsive values live here so every locale and page uses the
 * same computed font sizes without changing the root font size.
 * Display sizes are fluid below 768px: they reach their full size at ~430px
 * and shrink with the viewport, so headings never dominate a 320-360px screen.
 * Body text, UI text and inputs stay at readable fixed sizes (inputs >= 16px
 * keep iOS from zooming on focus).
 */
:root {
    --tt-font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --tt-type-hero-size: clamp(30px, 9.3vw, 40px);
    --tt-type-hero-line: clamp(35px, 10.7vw, 46px);
    --tt-type-page-title-size: clamp(26px, 7.4vw, 32px);
    --tt-type-page-title-line: clamp(32px, 9.3vw, 40px);
    --tt-type-landing-section-size: clamp(24px, 7.2vw, 32px);
    --tt-type-landing-section-line: clamp(30px, 9vw, 40px);
    --tt-type-article-section-size: clamp(21px, 5.6vw, 24px);
    --tt-type-article-section-line: clamp(28px, 7.4vw, 32px);
    --tt-type-component-title-size: clamp(22px, 6vw, 26px);
    --tt-type-component-title-line: clamp(29px, 7.9vw, 34px);
    --tt-type-card-title-size: clamp(17px, 4.7vw, 20px);
    --tt-type-card-title-line: clamp(24px, 6.5vw, 28px);
    --tt-type-small-heading-size: clamp(16px, 4.2vw, 18px);
    --tt-type-small-heading-line: clamp(22px, 5.6vw, 24px);
    --tt-type-lead-size: clamp(16px, 4.2vw, 18px);
    --tt-type-lead-line: clamp(24px, 6.5vw, 28px);
    --tt-type-body-size: 16px;
    --tt-type-body-line: 24px;
    --tt-type-body-compact-size: 14px;
    --tt-type-body-compact-line: 20px;
    --tt-type-article-body-size: clamp(16px, 4.2vw, 18px);
    --tt-type-article-body-line: clamp(26px, 6.5vw, 28px);
    --tt-type-ui-size: 14px;
    --tt-type-ui-line: 20px;
    --tt-type-button-large-size: 16px;
    --tt-type-button-large-line: 24px;
    --tt-type-caption-size: 12px;
    --tt-type-caption-line: 16px;
    --tt-type-overline-size: 11px;
    --tt-type-overline-line: 16px;
    --tt-type-input-size: 16px;
    --tt-type-input-line: 24px;
    --tt-type-map-page-title-size: clamp(21px, 5.6vw, 24px);
    --tt-type-map-page-title-line: clamp(28px, 7.4vw, 32px);
    --tt-type-quote-size: clamp(17px, 4.65vw, 20px);
    --tt-type-quote-line: clamp(26px, 7vw, 30px);
    --tt-type-popup-body-size: 14px;
    --tt-type-popup-body-line: 20px;
    --tt-type-footer-link-size: 14px;
    --tt-type-footer-link-line: 20px;
}

@media (min-width: 768px) {
    :root {
        --tt-type-hero-size: 52px;
        --tt-type-hero-line: 60px;
        --tt-type-page-title-size: 40px;
        --tt-type-page-title-line: 48px;
        --tt-type-landing-section-size: 36px;
        --tt-type-landing-section-line: 44px;
        --tt-type-article-section-size: 28px;
        --tt-type-article-section-line: 36px;
        --tt-type-map-page-title-size: 28px;
        --tt-type-map-page-title-line: 36px;
    }
}

@media (min-width: 1200px) {
    :root {
        --tt-type-hero-size: 64px;
        --tt-type-hero-line: 72px;
        --tt-type-page-title-size: 48px;
        --tt-type-page-title-line: 56px;
        --tt-type-landing-section-size: 40px;
        --tt-type-landing-section-line: 48px;
        --tt-type-article-section-size: 32px;
        --tt-type-article-section-line: 40px;
        --tt-type-component-title-size: 28px;
        --tt-type-component-title-line: 36px;
        --tt-type-map-page-title-size: 32px;
        --tt-type-map-page-title-line: 40px;
    }
}

/*
 * The scale is deliberately theme-neutral: dark and light themes continue to
 * own their colors, while text keeps exactly the same metrics in both modes.
 */
html {
    font-family: var(--tt-font-family);
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body,
button,
input,
select,
textarea {
    font-family: var(--tt-font-family);
}

body {
    font-size: var(--tt-type-body-size);
    line-height: var(--tt-type-body-line);
}
.tt-type-page-title { font-size: var(--tt-type-page-title-size); line-height: var(--tt-type-page-title-line); }
.tt-type-component-title { font-size: var(--tt-type-component-title-size); line-height: var(--tt-type-component-title-line); }
.tt-type-card-title { font-size: var(--tt-type-card-title-size); line-height: var(--tt-type-card-title-line); }
.tt-type-small-heading { font-size: var(--tt-type-small-heading-size); line-height: var(--tt-type-small-heading-line); }

/* Shared site chrome. !important replaces legacy mobile/header declarations. */
.site-primary-tabs a,
.site-topbar-actions :is(a, button),
.site-create-menu-item,
.language-switcher__label {
    font-size: var(--tt-type-ui-size) !important;
    line-height: var(--tt-type-ui-line) !important;
}

#mobile-bottom-nav a span:last-child {
    font-size: var(--tt-type-caption-size) !important;
    line-height: var(--tt-type-caption-line) !important;
}

.site-footer__brand h2 {
    font-size: var(--tt-type-article-section-size);
    line-height: var(--tt-type-article-section-line);
}

.site-footer__brand > p { font-size: var(--tt-type-body-size); line-height: var(--tt-type-body-line); }
.site-footer__nav h3 { font-size: var(--tt-type-ui-size); line-height: var(--tt-type-ui-line); }
.site-footer__nav a { font-size: var(--tt-type-footer-link-size); line-height: var(--tt-type-footer-link-line); }
.site-footer__bottom { font-size: var(--tt-type-caption-size); line-height: var(--tt-type-caption-line); }

/* Home */
.page-home-redesign .tt-home-hero__copy h1 {
    font-size: var(--tt-type-hero-size);
    line-height: var(--tt-type-hero-line);
}

.page-home-redesign .tt-home-hero__copy > p,
.page-home-redesign .tt-home-section__head p,
.page-home-redesign .tt-home-newsletter p {
    font-size: var(--tt-type-lead-size);
    line-height: var(--tt-type-lead-line);
}

.page-home-redesign .tt-home-button { font-size: var(--tt-type-button-large-size); line-height: var(--tt-type-button-large-line); }
.page-home-redesign .tt-home-nav :is(a, button, select),
.page-home-redesign .tt-home-section__head > a { font-size: var(--tt-type-ui-size); line-height: var(--tt-type-ui-line); }

.page-home-redesign :is(.tt-home-section__head, .tt-home-map__copy, .tt-home-newsletter) h2,
.page-home-redesign .tt-route-finder > h2 {
    font-size: var(--tt-type-landing-section-size);
    line-height: var(--tt-type-landing-section-line);
}

.page-home-redesign .tt-home-route-card h3,
.page-home-redesign .tt-home-content-card h3 {
    font-size: var(--tt-type-card-title-size);
    line-height: var(--tt-type-card-title-line);
    white-space: normal;
    overflow-wrap: anywhere;
}

.page-home-redesign .tt-home-collection-card__copy h3,
.page-home-redesign .tt-home-image-cta h2 {
    font-size: var(--tt-type-component-title-size);
    line-height: var(--tt-type-component-title-line);
}

.page-home-redesign :is(.tt-home-route-card__metrics, .tt-home-route-card__tags, .tt-home-route-card__rating) { font-size: var(--tt-type-ui-size); line-height: var(--tt-type-ui-line); }
.page-home-redesign :is(.tt-home-route-card__kind, .tt-home-content-card__meta, .tt-home-content-card__stats) { font-size: var(--tt-type-caption-size); line-height: var(--tt-type-caption-line); }
.page-home-redesign .tt-home-footer h3,
.page-home-redesign .tt-home-footer a { font-size: var(--tt-type-ui-size); line-height: var(--tt-type-ui-line); }
.page-home-redesign .tt-home-footer__brand > p { font-size: var(--tt-type-body-size); line-height: var(--tt-type-body-line); }
.page-home-redesign .tt-home-footer__bottom { font-size: var(--tt-type-caption-size); line-height: var(--tt-type-caption-line); }

/* Home: readable copy, controls and metadata without changing component colors. */
.page-home-redesign .tt-route-finder__control [role="group"] > span:first-child,
.page-home-redesign .tt-home-content-card__media > span,
.page-home-redesign .tt-home-plus__eyebrow,
.page-home-redesign .tt-home-plus__comparison-heading > span {
    font-size: var(--tt-type-overline-size) !important;
    line-height: var(--tt-type-overline-line) !important;
}

.page-home-redesign .tt-route-finder__control :is(select, button),
.page-home-redesign .tt-route-finder__submit,
.page-home-redesign .tt-home-newsletter :is(input, button) {
    font-size: var(--tt-type-input-size) !important;
    line-height: var(--tt-type-input-line) !important;
}

.page-home-redesign .tt-home-benefits strong,
.page-home-redesign .tt-home-plus__features > span,
.page-home-redesign .tt-home-plus__button,
.page-home-redesign .tt-home-image-cta > span {
    font-size: var(--tt-type-ui-size) !important;
    line-height: var(--tt-type-ui-line) !important;
}

.page-home-redesign .tt-home-benefits p,
.page-home-redesign .tt-home-route-card__body > p,
.page-home-redesign .tt-home-content-card__body > p,
.page-home-redesign .tt-home-plus__features,
.page-home-redesign .tt-home-plus__donation p,
.page-home-redesign .tt-home-image-cta > p,
.page-home-redesign .tt-home-newsletter p {
    font-size: var(--tt-type-body-compact-size) !important;
    line-height: var(--tt-type-body-compact-line) !important;
}

.page-home-redesign .tt-home-route-card__metrics,
.page-home-redesign .tt-home-route-card__tags,
.page-home-redesign .tt-home-route-card__rating,
.page-home-redesign .tt-home-content-card__meta,
.page-home-redesign .tt-home-content-card__stats,
.page-home-redesign .tt-home-plus__prices small {
    font-size: var(--tt-type-caption-size) !important;
    line-height: var(--tt-type-caption-line) !important;
}

.page-home-redesign .tt-home-plus__copy > h2 {
    font-size: var(--tt-type-landing-section-size) !important;
    line-height: var(--tt-type-landing-section-line) !important;
}

.page-home-redesign .tt-home-plus__copy > p {
    font-size: var(--tt-type-body-size) !important;
    line-height: var(--tt-type-body-line) !important;
}

.page-home-redesign .tt-home-newsletter h2 {
    font-size: var(--tt-type-component-title-size) !important;
    line-height: var(--tt-type-component-title-line) !important;
}

/* Route catalog, collections, regions and other catalog landing pages */
:is(.page-routes-index, .page-route-collections, .page-regions-index, .page-region-detail) .catalog-light-hero__eyebrow {
    font-size: var(--tt-type-ui-size);
    line-height: var(--tt-type-ui-line);
}

:is(.page-routes-index, .page-route-collections, .page-regions-index, .page-region-detail) .catalog-light-hero__title {
    font-size: var(--tt-type-page-title-size);
    line-height: var(--tt-type-page-title-line);
    white-space: normal;
    overflow-wrap: anywhere;
}

:is(.page-routes-index, .page-route-collections, .page-regions-index, .page-region-detail) .catalog-light-hero__description {
    font-size: var(--tt-type-lead-size);
    line-height: var(--tt-type-lead-line);
}

.catalog-light-hero__button,
.catalog-light-hero__chip,
.route-catalog-filter,
.route-collections-button { font-size: var(--tt-type-ui-size); line-height: var(--tt-type-ui-line); }
.catalog-light-hero__stat strong { font-size: var(--tt-type-card-title-size); line-height: var(--tt-type-card-title-line); }
.catalog-light-hero__stat span { font-size: var(--tt-type-caption-size); line-height: var(--tt-type-caption-line); }
.route-catalog-results-summary { font-size: var(--tt-type-body-size); line-height: var(--tt-type-body-line); }
:is(.page-routes-index, .page-route-collections, .page-regions-index, .page-region-detail) main h2 {
    font-size: var(--tt-type-component-title-size);
    line-height: var(--tt-type-component-title-line);
}
:is(.page-routes-index, .page-route-collections, .page-regions-index, .page-region-detail) main h3 {
    font-size: var(--tt-type-card-title-size);
    line-height: var(--tt-type-card-title-line);
}

.route-showcase-card__title,
.official-route-card__title {
    font-size: var(--tt-type-card-title-size);
    line-height: var(--tt-type-card-title-line);
    white-space: normal;
    overflow-wrap: anywhere;
}

.route-showcase-card__text,
.official-route-card__description { font-size: var(--tt-type-body-size); line-height: var(--tt-type-body-line); }
:is(.route-showcase-card__metrics, .route-showcase-card__region, .route-showcase-card__tags, .route-showcase-card__more) { font-size: var(--tt-type-ui-size); line-height: var(--tt-type-ui-line); }
.route-showcase-card__activity,
.route-showcase-card__provenance { font-size: var(--tt-type-caption-size); line-height: var(--tt-type-caption-line); }

/* Route detail */
body.page-route-detail :is(.route-detail-hero-title, .route-mobile-title) {
    font-size: var(--tt-type-page-title-size);
    line-height: var(--tt-type-page-title-line);
    white-space: normal;
    overflow-wrap: anywhere;
}

.page-route-detail .route-detail-hero-description { font-size: var(--tt-type-lead-size); line-height: var(--tt-type-lead-line); }
.page-route-detail .route-detail-hero-action { font-size: var(--tt-type-ui-size); line-height: var(--tt-type-ui-line); }
.page-route-detail .route-detail-hero-chips {
    gap: 5px;
    padding: 14px 16px;
}
.page-route-detail .route-detail-hero-chip,
.page-route-detail a.route-detail-hero-chip {
    min-height: 28px;
    gap: 4px;
    padding: 5px 8px;
    font-size: 10px;
    line-height: 1;
}
.page-route-detail .route-detail-hero-chip img {
    width: 12px;
    height: 12px;
}
.page-route-detail .route-detail-hero-stat dt { font-size: var(--tt-type-caption-size); line-height: var(--tt-type-caption-line); }
.page-route-detail .route-detail-hero-stat dd { font-size: var(--tt-type-card-title-size); line-height: var(--tt-type-card-title-line); }

.page-route-detail :is(
    .route-detail-copy-block__title,
    .route-mobile-section__title,
    .route-actuality__header h2,
    .route-condition-modal__head h2
) { font-size: var(--tt-type-component-title-size); line-height: var(--tt-type-component-title-line); }
.page-route-detail :is(.route-guide-card__title, .route-side-card__title) {
    font-size: 18px;
    line-height: 1.22;
}
.page-route-detail .route-guide-card__title img {
    width: 16px;
    height: 16px;
}

.page-route-detail :is(.route-detail-copy-block__text, .route-guide-card__body, .route-actuality__item > p) { font-size: var(--tt-type-body-size); line-height: var(--tt-type-body-line); }
.page-route-detail :is(.route-actuality__meta, .route-mobile-section__meta, .route-condition-modal label) { font-size: var(--tt-type-ui-size); line-height: var(--tt-type-ui-line); }
.page-route-detail :is(.route-actuality__eyebrow, .route-actuality__label) { font-size: var(--tt-type-caption-size); line-height: var(--tt-type-caption-line); }
.page-route-detail .route-condition-modal :is(input, textarea, select) { font-size: var(--tt-type-input-size); line-height: var(--tt-type-input-line); }

/* Journal */
.page-journal-index .journal-hero h1 { font-size: var(--tt-type-page-title-size); line-height: var(--tt-type-page-title-line); }
.page-journal-index .journal-hero__copy > p { font-size: var(--tt-type-lead-size); line-height: var(--tt-type-lead-line); }
.page-journal-index :is(.journal-button, .journal-filter, .journal-sort select) { font-size: var(--tt-type-ui-size); line-height: var(--tt-type-ui-line); }
.page-journal-index .journal-card__title { font-size: var(--tt-type-card-title-size); line-height: var(--tt-type-card-title-line); }
.page-journal-index .journal-card:first-child .journal-card__title { font-size: var(--tt-type-component-title-size); line-height: var(--tt-type-component-title-line); }
.page-journal-index .journal-card__description { font-size: var(--tt-type-body-size); line-height: var(--tt-type-body-line); }
.page-journal-index :is(.journal-card__name, .journal-card__author time) { font-size: var(--tt-type-ui-size); line-height: var(--tt-type-ui-line); }
.page-journal-index :is(.journal-card__meta, .journal-card__metric, .journal-card__location) { font-size: var(--tt-type-caption-size); line-height: var(--tt-type-caption-line); }

/* Remaining user-facing archives, communities, albums, search and SEO pages */
:is(
    .page-search .search-results-title,
    .page-articles-index .articles-archive-page h1,
    .community-page .community-intro h1,
    .community-detail-page .community-hero-copy h1,
    .all-albums-page h1,
    .album-detail-page h1,
    .seo-landing-page h1,
    .legal-document-page h1
) {
    font-size: var(--tt-type-page-title-size);
    line-height: var(--tt-type-page-title-line);
    white-space: normal;
    overflow-wrap: anywhere;
}

:is(
    .page-articles-index .articles-archive-page > section:first-child > p:not(:first-child),
    .community-page .community-intro h1 + p,
    .community-detail-page .community-hero-copy p,
    .seo-landing-page header > p
) { font-size: var(--tt-type-lead-size); line-height: var(--tt-type-lead-line); }

:is(.community-page, .community-detail-page, .all-albums-page, .album-detail-page, .seo-landing-page) h2 {
    font-size: var(--tt-type-component-title-size);
    line-height: var(--tt-type-component-title-line);
}

:is(.community-page, .community-detail-page, .all-albums-page, .album-detail-page, .page-search) h3,
.community-card__title {
    font-size: var(--tt-type-card-title-size);
    line-height: var(--tt-type-card-title-line);
}

.community-card__description { font-size: var(--tt-type-body-size); line-height: var(--tt-type-body-line); }
.page-search .search-results-form input { font-size: var(--tt-type-input-size); line-height: var(--tt-type-input-line); }
.page-search :is(.search-tab-btn, .search-results-form button) { font-size: var(--tt-type-ui-size); line-height: var(--tt-type-ui-line); }

/* Subscription, profile, messenger and official-route screens. */
.subscription-shell h1,
.official-routes-page > :first-child h1 {
    font-size: var(--tt-type-page-title-size) !important;
    line-height: var(--tt-type-page-title-line) !important;
}

.subscription-shell h2,
.messenger-page .sidebar-header h2,
.profile-page .profile-header-name-text {
    font-size: var(--tt-type-component-title-size) !important;
    line-height: var(--tt-type-component-title-line) !important;
}

.subscription-shell h3,
.official-routes-page .official-route-card__title,
.profile-page :is(.profile-mobile-rank__title, .profile-events-card__header h3) {
    font-size: var(--tt-type-card-title-size) !important;
    line-height: var(--tt-type-card-title-line) !important;
}

.subscription-shell .subscription-hero > div > p:not(:first-child),
.subscription-shell .subscription-plan-description,
.profile-page :is(.profile-header-bio, .profile-header-bio--mobile) {
    font-size: var(--tt-type-body-size) !important;
    line-height: var(--tt-type-body-line) !important;
}

.subscription-shell :is(.subscription-feature-row, .subscription-price-button),
.profile-page :is(.profile-tab-btn, .profile-header-action-row button, .profile-header-action-row a),
.messenger-page :is(.messenger-new-chat-btn, .messenger-nav-item, .folder-btn) {
    font-size: var(--tt-type-ui-size) !important;
    line-height: var(--tt-type-ui-line) !important;
}

/* Keep the two textual profile actions visually identical. The follow control
   carries a Tailwind utility while the message link inherits the shared UI
   scale, which previously made their labels render at different sizes. */
.profile-page .profile-header-action-row :is(.follow-btn-ui, a[href*="start_chat"]) {
    font-size: 11px !important;
    line-height: 1 !important;
    font-weight: 720 !important;
}

.subscription-shell :is(.subscription-feature-icon, .subscription-status-badge),
.profile-page :is(.profile-header-badge, .profile-current-event__status),
.messenger-page :is(.messenger-nav-caption, .messenger-nav-badge) {
    font-size: var(--tt-type-caption-size) !important;
    line-height: var(--tt-type-caption-line) !important;
}

/* Long-form articles. Heading !important rules replace legacy mobile prose rules. */
.page-post-detail .article-hero-title {
    font-size: var(--tt-type-page-title-size);
    line-height: var(--tt-type-page-title-line);
    white-space: normal;
    overflow-wrap: anywhere;
}

.page-post-detail .article-hero-subtitle,
.page-post-detail .post-content,
.page-post-detail .post-content :is(p, li) { font-size: var(--tt-type-article-body-size); line-height: var(--tt-type-article-body-line); }
.page-post-detail .post-content h2 { font-size: var(--tt-type-article-section-size) !important; line-height: var(--tt-type-article-section-line) !important; }
.page-post-detail .post-content h3 { font-size: var(--tt-type-component-title-size) !important; line-height: var(--tt-type-component-title-line) !important; }
.page-post-detail .post-content h4 { font-size: var(--tt-type-card-title-size); line-height: var(--tt-type-card-title-line); }
.page-post-detail .post-content blockquote { font-size: var(--tt-type-quote-size); line-height: var(--tt-type-quote-line); }
.page-post-detail :is(.article-hero-chip, .article-hero-author-copy, .article-hero-action) { font-size: var(--tt-type-ui-size); line-height: var(--tt-type-ui-line); }
.page-post-detail :is(.article-hero-stat, figcaption) { font-size: var(--tt-type-caption-size); line-height: var(--tt-type-caption-line); }
.page-post-detail #route-story-nav,
.page-post-detail #route-story-nav p,
.page-post-detail .route-story-nav-link,
.page-post-detail .route-story-nav-link span {
    font-family: inherit !important;
    font-size: var(--tt-type-article-body-size) !important;
    line-height: var(--tt-type-article-body-line) !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}
.page-post-detail #route-story-nav p {
    color: #6b7280 !important;
}
.page-post-detail .route-story-nav-link {
    color: #1f2937 !important;
}
.page-post-detail .route-story-nav-link.is-active {
    color: #ea580c !important;
}
.page-post-detail .post-related-section h2 { font-size: var(--tt-type-component-title-size); line-height: var(--tt-type-component-title-line); }
.page-post-detail .post-related-section h3 { font-size: var(--tt-type-card-title-size); line-height: var(--tt-type-card-title-line); }

/* Forms and dialogs */
:is(.auth-modal, .route-condition-modal, [role="dialog"]) :is(input, textarea, select),
.auth-page :is(input, textarea, select) { font-size: var(--tt-type-input-size); line-height: var(--tt-type-input-line); }
:is(.auth-modal, .route-condition-modal, [role="dialog"]) label,
.auth-page label { font-size: var(--tt-type-ui-size); line-height: var(--tt-type-ui-line); }
:is(.auth-modal, .route-condition-modal, [role="dialog"]) :is(.field-help, .field-error, .helptext, .errorlist) { font-size: var(--tt-type-caption-size); line-height: var(--tt-type-caption-line); }
.auth-page h1 { font-size: var(--tt-type-component-title-size); line-height: var(--tt-type-component-title-line); }
.auth-page main p { font-size: var(--tt-type-body-size); line-height: var(--tt-type-body-line); }
.auth-page main :is(a, button) { font-size: var(--tt-type-ui-size); line-height: var(--tt-type-ui-line); }

/* Standalone editors and roadmap also use the same semantic scale. */
.page-roadmap h1 {
    font-size: var(--tt-type-page-title-size) !important;
    line-height: var(--tt-type-page-title-line) !important;
}
.page-roadmap > section:first-child p { font-size: var(--tt-type-lead-size); line-height: var(--tt-type-lead-line); }
.page-roadmap h2,
.page-editor h2 { font-size: var(--tt-type-component-title-size); line-height: var(--tt-type-component-title-line); }
.page-roadmap h3,
.page-editor h3 { font-size: var(--tt-type-card-title-size); line-height: var(--tt-type-card-title-line); }
.page-editor :is(input, textarea, select) { font-size: var(--tt-type-input-size); line-height: var(--tt-type-input-line); }
.page-editor :is(label, button) { font-size: var(--tt-type-ui-size); line-height: var(--tt-type-ui-line); }

/*
 * Compatibility overrides: Tailwind utilities and the map's legacy styles use
 * !important. These selectors are deliberately isolated to text-bearing UI;
 * icon dimensions and third-party MapLibre controls are not touched.
 */
.page-map .map-seo-intro h1 {
    font-size: var(--tt-type-map-page-title-size) !important;
    line-height: var(--tt-type-map-page-title-line) !important;
}

.page-map :is(
    #route-title,
    .map-route-title,
    .map-popup-title,
    .workspace-panel__title,
    .collection-header-title,
    #planner-modal h2
) { font-size: var(--tt-type-card-title-size) !important; line-height: var(--tt-type-card-title-line) !important; }

body.page-map #route-info-card #route-title,
body.page-map #planner-sidebar #planner-modal h2,
body.page-map #left-collection-menu .collection-header-title {
    font-size: var(--tt-type-card-title-size) !important;
    line-height: var(--tt-type-card-title-line) !important;
}

.page-map :is(.route-section-title, .planner-section-title, .collection-section h3) {
    font-size: var(--tt-type-small-heading-size) !important;
    line-height: var(--tt-type-small-heading-line) !important;
}

.page-map :is(
    .map-workspace-tab,
    .map-mode-tab,
    .map-filter-button,
    .map-panel-button,
    .route-card-action,
    .planner-action,
    .collection-action,
    #route-info-card button,
    #planner-sidebar button,
    #left-collection-menu button
) { font-size: var(--tt-type-ui-size) !important; line-height: var(--tt-type-ui-line) !important; }

.page-map :is(
    #route-info-card input,
    #planner-sidebar input,
    #planner-sidebar textarea,
    #planner-sidebar select,
    #left-collection-menu input
) { font-size: var(--tt-type-input-size) !important; line-height: var(--tt-type-input-line) !important; }

body.page-map #route-info-card :is(input, textarea, select),
body.page-map #planner-sidebar :is(input, textarea, select),
body.page-map #left-collection-menu input {
    font-size: var(--tt-type-input-size) !important;
    line-height: var(--tt-type-input-line) !important;
}

.page-map :is(
    .map-popup-description,
    #route-description-container p,
    .route-card-description
) { font-size: var(--tt-type-popup-body-size) !important; line-height: var(--tt-type-popup-body-line) !important; }

.page-map :is(
    .map-hint,
    .map-counter,
    .route-card-meta,
    .planner-hint,
    .collection-header-meta,
    .collection-route-status
) { font-size: var(--tt-type-caption-size) !important; line-height: var(--tt-type-caption-line) !important; }

/* Existing Tailwind utilities in these page templates predate semantic roles. */
.page-route-detail :is(.text-2xl, .md\:text-2xl),
.page-post-detail :is(.text-xl, .md\:text-2xl) {
    font-size: var(--tt-type-component-title-size) !important;
    line-height: var(--tt-type-component-title-line) !important;
}

/*
 * Legacy templates used 7–11px Tailwind escape utilities for meaningful UI.
 * Keep only two readable compact roles: 12/16 for captions and 11/16 for
 * explicit overlines. MapLibre canvas labels and attribution are unaffected.
 */
body :is(
    .text-\[7px\],
    .text-\[8px\],
    .text-\[9px\],
    .text-\[10px\],
    .text-\[11px\]
) {
    font-size: var(--tt-type-caption-size) !important;
    line-height: var(--tt-type-caption-line) !important;
}

@media (max-width: 767px) {
    .page-home-redesign .tt-home-section__head,
    .page-route-detail .route-mobile-section__head,
    .page-journal-index .journal-hero__copy {
        min-height: 0;
    }
}

/* Page titles that carry their own px size: keep them fluid on phones so 320-360px screens aren't dominated by headings. */
@media (max-width: 767px) {
    body[class] .regions-showcase-intro__title {
        font-size: clamp(25px, 7.2vw, 32px);
    }

    body #tt-route-finder-title {
        font-size: clamp(24px, 6.8vw, 30px);
    }
}


/* ---- css/components/password-fields.css ---- */
/* Shared auth controls: pages, auth modal and profile settings. */
.tt-password { display: block; position: relative; width: 100%; min-width: 0; }
.tt-password > input { width: 100%; padding-right: 52px !important; }
.tt-password > input::-ms-reveal,
.tt-password > input::-ms-clear { display: none; }
.tt-password__toggle {
    position: absolute; inset: 0 4px 0 auto; display: grid; place-items: center;
    width: 44px; min-height: 44px; padding: 0; border: 0; background: transparent;
    color: #64748b; cursor: pointer; border-radius: 6px; font: inherit;
}
.tt-password__toggle:hover, .tt-password__toggle[aria-pressed="true"] { color: #c2410c; }
.tt-password__toggle:focus-visible { outline: 2px solid #f97316; outline-offset: -3px; }
.tt-password__toggle svg { width: 20px; height: 20px; pointer-events: none; }
.tt-password__toggle .tt-password__slash { display: none; }
.tt-password__toggle[aria-pressed="true"] .tt-password__slash { display: block; }
.tt-password-rules { display: grid; gap: 5px; margin: 9px 0 0; }
.tt-password-rules > .tt-password-rule {
    display: flex; align-items: start; gap: 7px; font: 500 12px/1.45 Inter, sans-serif;
    color: #64748b; letter-spacing: normal; text-transform: none;
}
.tt-password-rule::before { content: '○'; flex: 0 0 13px; text-align: center; font-weight: 700; }
.tt-password-rule[data-state="valid"] { color: #16704c; }
.tt-password-rule[data-state="valid"]::before { content: '✓'; }
.tt-password-rule[data-state="invalid"] { color: #be123c; }
.tt-password-rule[data-state="invalid"]::before { content: '×'; }
.tt-password-rule[data-state="checking"]::before { content: '…'; }
.tt-password-status, .auth-modal__field .tt-password-status {
    display: block; margin-top: 7px; font: 500 12px/1.45 Inter, sans-serif;
    letter-spacing: normal; text-transform: none; color: #64748b;
}
.tt-password-status[data-state="invalid"] { color: #be123c; }
.tt-password-status[data-state="valid"] { color: #16704c; }
.tt-password > input[aria-invalid="true"] { outline: 2px solid #e11d48; outline-offset: -1px; }
.auth-modal__grid:has(.tt-password-rules) { grid-template-columns: minmax(0, 1fr); }
.auth-consent {
    display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 10px; row-gap: 4px;
    padding: 12px 14px; border: 1px solid #e5e7eb; border-radius: 12px;
    background: #fafaf9; text-align: left; font-family: inherit;
}
.auth-consent__label { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; cursor: pointer; }
.auth-consent__label > input[type="checkbox"] {
    flex: 0 0 20px; width: 20px; height: 20px; min-height: 20px; margin: 0;
    accent-color: #ff6a1a; cursor: pointer;
}
.auth-consent .auth-consent__label strong { font: 600 14px/1.4 Inter, sans-serif; color: #1f2937; }
.auth-consent__summary { grid-column: 2; font: 400 12px/1.45 Inter, sans-serif; color: #64748b; }
.auth-consent .auth-consent__open {
    grid-column: 2; justify-self: start; display: inline-flex; align-items: center; gap: 5px;
    min-height: 32px; margin: 0; padding: 3px 0; border: 0; background: transparent;
    color: #b9470a; font: 600 12px/1.4 Inter, sans-serif; text-align: left; cursor: pointer;
}
.auth-consent__open:hover { text-decoration: underline; }
.auth-consent__open:focus-visible { outline: 2px solid #f97316; outline-offset: 3px; }
[data-theme="dark"] .auth-consent { background: #17232c; border-color: #344451; }
[data-theme="dark"] .auth-consent .auth-consent__label strong { color: #f1f5f9; }
[data-theme="dark"] .auth-consent__summary, [data-theme="dark"] .tt-password-rule { color: #cbd5e1; }
[data-theme="dark"] .tt-password-rule[data-state="valid"] { color: #6ee7b7; }
[data-theme="dark"] .tt-password-rule[data-state="invalid"] { color: #fda4af; }