#enruta-app { --er-ink: #102d48; --er-blue: #0863dc; --er-sky: #3dbed0; --er-mint: #bce8dd; --er-yellow: #f5c552; --er-paper: #f4f7fb; --er-muted: #65788b; --er-line: #dfe7ef; color: var(--er-ink); font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 15px; line-height: 1.5; min-height: 70vh; width: 100vw; max-width: none; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); overflow-x: clip; } #enruta-app *, #enruta-app *::before, #enruta-app *::after { box-sizing: border-box; } #enruta-app button, #enruta-app input, #enruta-app textarea, #enruta-app select { font: inherit; } #enruta-app button { cursor: pointer; } #enruta-app .er-shell { min-height: 720px; position: relative; overflow: hidden; background: var(--er-paper); border-radius: 24px; } #enruta-app .er-loading { padding: 40px; } #enruta-app .er-topbar { min-height: 72px; padding: 12px 28px; display: flex; align-items: center; justify-content: space-between; gap: 20px; background: #fff; border-bottom: 1px solid var(--er-line); } #enruta-app .er-brand { color: var(--er-ink); text-decoration: none; font-size: 25px; font-weight: 850; letter-spacing: -.08em; line-height: 1; } #enruta-app .er-brand span { display: block; padding-top: 5px; color: #72879a; font-size: 9px; font-weight: 700; letter-spacing: .24em; } #enruta-app .er-top-actions { display: flex; align-items: center; gap: 18px; } #enruta-app .er-event-name { color: var(--er-muted); font-size: 12px; font-weight: 650; } #enruta-app .er-profile { display: flex; align-items: center; gap: 8px; padding: 7px 12px; border: 1px solid var(--er-line); border-radius: 999px; background: #fff; color: var(--er-ink); font-size: 13px; font-weight: 700; } #enruta-app .er-main { width: min(1120px, calc(100% - 56px)); margin: 0 auto; padding: 38px 0 110px; } #enruta-app .er-welcome { display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: 30px; padding: 29px 32px; border-radius: 22px; background: linear-gradient(120deg, #e1f1f7 0%, #edf4fc 58%, #d7e8f7 100%); overflow: hidden; } #enruta-app .er-eyebrow { margin: 0 0 8px; color: #137aab; font-size: 11px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; } #enruta-app h1, #enruta-app h2, #enruta-app h3, #enruta-app p { margin-top: 0; } #enruta-app .er-welcome h1 { margin-bottom: 8px; color: var(--er-ink); font-size: clamp(30px, 4vw, 44px); line-height: 1.05; letter-spacing: -.055em; } #enruta-app .er-welcome h1 span { font-size: .7em; } #enruta-app .er-welcome p:not(.er-eyebrow) { max-width: 530px; margin: 0; color: #536d83; font-size: 15px; } #enruta-app .er-progress { display: flex; align-items: center; justify-content: flex-end; gap: 16px; } #enruta-app .er-progress-ring { width: 78px; height: 78px; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 7px solid #8cc4e8; border-right-color: #d5e9f6; border-radius: 50%; background: #fff; } #enruta-app .er-progress-ring strong { font-size: 20px; line-height: 1; } #enruta-app .er-progress-ring span { margin-top: 3px; color: var(--er-muted); font-size: 9px; } #enruta-app .er-progress b, #enruta-app .er-progress small, #enruta-app .er-progress a { display: block; } #enruta-app .er-progress b { margin-bottom: 3px; font-size: 13px; } #enruta-app .er-progress small { margin-bottom: 5px; color: var(--er-muted); font-size: 11px; } #enruta-app .er-progress a { color: #075dbd; font-size: 11px; font-weight: 750; text-decoration: none; } #enruta-app .er-shortcuts { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin: 20px 0 32px; } #enruta-app .er-shortcuts button { min-height: 122px; padding: 18px; display: grid; grid-template-columns: 42px 1fr; grid-template-rows: auto auto; align-content: center; column-gap: 12px; border: 1px solid var(--er-line); border-radius: 18px; background: #fff; color: var(--er-ink); text-align: left; transition: transform .16s, box-shadow .16s; } #enruta-app .er-shortcuts button:hover { transform: translateY(-3px); box-shadow: 0 10px 25px rgba(21,55,83,.08); } #enruta-app .er-shortcuts button > span:first-child { width: 42px; height: 42px; grid-row: span 2; display: grid; place-items: center; border-radius: 14px; background: #e6f5fc; color: #1477b5; font-size: 22px; } #enruta-app .er-shortcuts button:nth-child(2) > span:first-child { background: #e3f5ee; color: #188870; } #enruta-app .er-shortcuts button:nth-child(3) > span:first-child { background: #f4eafe; color: #9c45b4; } #enruta-app .er-shortcuts button:nth-child(4) > span:first-child { background: #e9efff; color: #465dd0; } #enruta-app .er-shortcuts b { align-self: end; font-size: 13px; } #enruta-app .er-shortcuts small { align-self: start; color: var(--er-muted); font-size: 10px; } #enruta-app .er-section { margin: 34px 0; } #enruta-app .er-section-head { margin-bottom: 15px; display: flex; align-items: end; justify-content: space-between; gap: 20px; } #enruta-app .er-section-head h2 { margin: 0; font-size: 24px; line-height: 1.1; letter-spacing: -.04em; } #enruta-app .er-text-button { padding: 0; border: 0; background: transparent; color: #075dbd; font-size: 12px; font-weight: 750; } #enruta-app .er-route-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; } #enruta-app .er-route-card { overflow: hidden; border: 1px solid var(--er-line); border-radius: 18px; background: #fff; } #enruta-app .er-route-cover { height: 115px; position: relative; overflow: hidden; display: flex; align-items: flex-start; justify-content: space-between; padding: 14px; background: linear-gradient(155deg,#c2e7f1,#a8d4e9 45%,#dceaf0); } #enruta-app .er-route-card:nth-child(3n+2) .er-route-cover { background: linear-gradient(145deg,#d8f1e8,#abdccb 50%,#e9f1db); } #enruta-app .er-route-card:nth-child(3n+3) .er-route-cover { background: linear-gradient(145deg,#c8d8f7,#c0d1f0 55%,#e8ecf5); } #enruta-app .er-route-cover::before, #enruta-app .er-route-cover::after { content: ""; position: absolute; width: 250px; height: 120px; left: -12px; bottom: -83px; border: 1px solid rgba(255,255,255,.65); border-radius: 50%; transform: rotate(-9deg); } #enruta-app .er-route-cover::after { width: 300px; bottom: -92px; left: 35px; } #enruta-app .er-theme-icon { z-index: 1; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 14px; background: rgba(255,255,255,.9); color: #148a83; font-size: 20px; } #enruta-app .er-route-status { z-index: 1; padding: 5px 9px; border-radius: 999px; background: rgba(255,255,255,.83); color: #347b69; font-size: 10px; font-weight: 750; } #enruta-app .er-route-content { padding: 16px; } #enruta-app .er-route-content h3 { margin: 0 0 6px; font-size: 17px; line-height: 1.2; letter-spacing: -.03em; } #enruta-app .er-route-content p { min-height: 42px; margin: 0 0 11px; color: var(--er-muted); font-size: 12px; } #enruta-app .er-route-meta { display: flex; flex-wrap: wrap; gap: 12px; color: #6b8191; font-size: 10px; } #enruta-app .er-mini-feed { display: grid; gap: 7px; margin-top: 12px; padding-top: 10px; border-top: 1px solid #edf1f4; } #enruta-app .er-mini-feed > small { color: #8192a0; font-size: 9px; font-weight: 750; text-transform: uppercase; letter-spacing: .06em; } #enruta-app .er-mini-contribution { display: grid; grid-template-columns: 25px 1fr; gap: 7px; align-items: start; } #enruta-app .er-mini-contribution > span { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 8px; background: #e6f3f1; font-size: 13px; } #enruta-app .er-mini-contribution b { display: block; overflow: hidden; color: #607689; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; } #enruta-app .er-mini-contribution p { min-height: 0; margin: 1px 0 0; color: #304a61; font-size: 10px; display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } #enruta-app .er-card-actions { min-height: 38px; display: flex; align-items: center; justify-content: space-between; margin-top: 12px; } #enruta-app .er-joined, #enruta-app .er-pending { color: #23836e; font-size: 11px; font-weight: 750; } #enruta-app .er-pending { color: #9c6720; } #enruta-app .er-button { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 18px; border: 0; border-radius: 999px; font-weight: 750; text-decoration: none; transition: transform .16s, background .16s; } #enruta-app .er-button:hover { transform: translateY(-1px); } #enruta-app .er-button-dark { background: var(--er-ink); color: #fff; } #enruta-app .er-button-dark:hover { background: #0b68a4; color: #fff; } #enruta-app .er-button-small { min-height: 33px; padding: 0 13px; background: var(--er-blue); color: #fff; font-size: 11px; } #enruta-app .er-button-small:hover { background: #004fb7; } #enruta-app .er-icon-button { width: 34px; height: 34px; border: 1px solid #c9d9e5; border-radius: 50%; background: #fff; color: #0c65c5; font-size: 22px; line-height: 1; } #enruta-app .er-challenge-peek { padding: 25px; border-radius: 20px; background: #fff; } #enruta-app .er-challenge-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } #enruta-app .er-challenge-card { min-height: 86px; display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--er-line); border-radius: 15px; background: #fff; } #enruta-app .er-challenge-card.is-done { background: #eff8f4; } #enruta-app .er-challenge-icon { width: 48px; height: 48px; flex: none; display: block; background-image: var(--er-challenge-icons); background-size: 300% 300%; background-repeat: no-repeat; } #enruta-app .er-challenge-icon-1 { background-position: 0 0; } #enruta-app .er-challenge-icon-2 { background-position: 50% 0; } #enruta-app .er-challenge-icon-3 { background-position: 100% 0; } #enruta-app .er-challenge-icon-4 { background-position: 0 50%; } #enruta-app .er-challenge-icon-5 { background-position: 50% 50%; } #enruta-app .er-challenge-icon-6 { background-position: 100% 50%; } #enruta-app .er-challenge-icon-7 { background-position: 0 100%; } #enruta-app .er-challenge-icon-8 { background-position: 50% 100%; } #enruta-app .er-challenge-icon-9 { background-position: 100% 100%; } #enruta-app .er-challenge-points { display: inline-block; margin-left: 5px; padding: 2px 6px; border-radius: 999px; background: #fff4d3; color: #795b12; font-size: 9px; font-weight: 800; white-space: nowrap; } #enruta-app .er-badges { max-width: 760px; margin: 20px 0; padding: 18px; border: 1px solid var(--er-line); border-radius: 17px; background: #fff; } #enruta-app .er-badges h2 { margin-bottom: 12px; font-size: 17px; } #enruta-app .er-badges > div { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; } #enruta-app .er-badges article { min-height: 122px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: 1px solid #e5ebef; border-radius: 13px; background: #f8fafb; color: #8797a2; text-align: center; } #enruta-app .er-badges article.is-earned { border-color: #e4c66e; background: #fffbef; color: var(--er-ink); } #enruta-app .er-badge-icon { width: 62px; height: 62px; display: block; background-image: var(--er-badges); background-size: 300% 100%; background-repeat: no-repeat; filter: grayscale(1); opacity: .55; } #enruta-app .er-badges article.is-earned .er-badge-icon { filter: none; opacity: 1; } #enruta-app .er-badge-icon-1 { background-position: 0 50%; } #enruta-app .er-badge-icon-2 { background-position: 50% 50%; } #enruta-app .er-badge-icon-3 { background-position: 100% 50%; } #enruta-app .er-badges b { font-size: 12px; } #enruta-app .er-badges small { font-size: 10px; } #enruta-app .er-score-points { min-width: 150px; background: #fff4d3; } #enruta-app .er-score-points strong { color: #795b12; font-size: 30px; } #enruta-app .er-challenge-progress { max-width: 760px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 18px 0 9px; color: #607689; font-size: 11px; font-weight: 700; } #enruta-app .er-challenge-progress i { width: 100%; height: 7px; overflow: hidden; border-radius: 999px; background: #e7edf1; } #enruta-app .er-challenge-progress i b { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#0e9e9b,#e5b42b); } #enruta-app .er-challenge-symbol { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 13px; background: #e8f1ff; color: #126bd0; font-size: 18px; font-weight: 800; } #enruta-app .er-challenge-copy { flex: 1; } #enruta-app .er-challenge-copy b { display: block; font-size: 12px; line-height: 1.3; } #enruta-app .er-challenge-copy p { margin: 4px 0 0; color: var(--er-muted); font-size: 10px; } #enruta-app .er-challenge-action { flex: none; padding: 7px 10px; border: 0; border-radius: 999px; background: #eaf2fc; color: #155fa8; font-size: 10px; font-weight: 750; } #enruta-app .er-challenge-action:disabled { background: #d9eee5; color: #387860; } #enruta-app .er-screen-callout { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 21px 25px; border-radius: 18px; background: #102d48; color: #fff; } #enruta-app .er-screen-callout b, #enruta-app .er-screen-callout span { display: block; } #enruta-app .er-screen-callout b { margin-bottom: 4px; font-size: 14px; } #enruta-app .er-screen-callout span { color: #bfd1de; font-size: 12px; } #enruta-app .er-button-light { background: #fff; color: var(--er-ink); font-size: 12px; } #enruta-app .er-button-light:hover { background: var(--er-yellow); } #enruta-app .er-bottom-nav { position: absolute; z-index: 3; right: 0; bottom: 0; left: 0; min-height: 72px; display: flex; align-items: stretch; justify-content: center; gap: clamp(18px, 8vw, 100px); padding: 8px 16px; background: var(--er-ink); } #enruta-app .er-nav-item { min-width: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; border: 0; background: transparent; color: #bdcbd8; font-size: 10px; } #enruta-app .er-nav-item.active { color: #fff; } #enruta-app .er-nav-item.active .er-nav-icon { color: #8bd8df; } #enruta-app .er-nav-icon { font-size: 21px; line-height: 1.2; } #enruta-app .er-page-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 22px; } #enruta-app .er-page-head h1 { margin: 0 0 8px; font-size: clamp(30px,4vw,44px); line-height: 1.05; letter-spacing: -.055em; } #enruta-app .er-page-head p:not(.er-eyebrow) { max-width: 650px; margin: 0; color: var(--er-muted); font-size: 14px; } #enruta-app .er-route-filter { display: flex; gap: 8px; margin: 20px 0; } #enruta-app .er-route-filter span { padding: 8px 13px; border-radius: 999px; background: #e9eff6; color: #61778b; font-size: 11px; font-weight: 700; } #enruta-app .er-route-filter span.active { background: var(--er-blue); color: #fff; } #enruta-app .er-map-note { min-height: 175px; display: flex; align-items: center; gap: 25px; margin-top: 30px; padding: 24px; border-radius: 20px; background: linear-gradient(115deg,#d9edf4,#e7f1f5); } #enruta-app .er-map-art { width: 100px; height: 100px; flex: none; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.8); border-radius: 50%; background: radial-gradient(circle at 60% 35%,#f8ffff 0 4px,transparent 5px), radial-gradient(circle at 40% 65%,#fff 0 5px,transparent 6px), linear-gradient(140deg,#95cedb,#b7e2da); color: #fff; font-size: 42px; } #enruta-app .er-map-note h2 { margin-bottom: 7px; font-size: 24px; letter-spacing: -.04em; } #enruta-app .er-map-note p:last-child { margin: 0; color: var(--er-muted); font-size: 13px; } #enruta-app .er-challenge-list { display: grid; gap: 12px; max-width: 760px; } #enruta-app .er-score { min-width: 100px; padding: 12px 16px; border-radius: 16px; background: #e5f0fb; text-align: center; } #enruta-app .er-score strong, #enruta-app .er-score span { display: block; } #enruta-app .er-score strong { font-size: 25px; } #enruta-app .er-score span { color: var(--er-muted); font-size: 10px; } #enruta-app .er-program-heading-icon { width: 76px; height: 76px; flex: none; display: grid; place-items: center; border-radius: 24px; background: #e8f3f5; color: #147b83; } #enruta-app .er-program-heading-icon svg { width: 46px; height: 46px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } #enruta-app .er-shortcuts button > .er-shortcut-program-icon { background: #e8f3f5; color: #147b83; } #enruta-app .er-shortcut-program-icon svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; } #enruta-app .er-program-notice { display: grid; gap: 3px; margin: 0 0 18px; padding: 15px 18px; border: 1px solid #ebd89e; border-radius: 14px; background: #fff8df; color: #735918; font-size: 12px; } #enruta-app .er-program-notice b { font-size: 13px; } #enruta-app .er-program-day { max-width: 850px; margin-bottom: 18px; padding: 22px; border: 1px solid var(--er-line); border-radius: 18px; background: #fff; } #enruta-app .er-program-day h2 { margin-bottom: 10px; font-size: 19px; } #enruta-app .er-program-item { display: grid; grid-template-columns: 112px 1fr; gap: 16px; padding: 14px 0; border-top: 1px solid var(--er-line); } #enruta-app .er-program-item time { align-self: start; width: max-content; min-width: 86px; padding: 6px 9px; border-radius: 9px; background: #e8f3f5; color: #147b83; font-size: 11px; font-weight: 800; text-align: center; } #enruta-app .er-program-item b { font-size: 13px; } #enruta-app .er-program-item p { margin: 3px 0; color: var(--er-muted); font-size: 11px; } #enruta-app .er-program-item small { color: #8293a2; font-size: 10px; } #enruta-app .er-program-item.is-provisional { background: #fffdf5; } #enruta-app .er-avatar-large { width: 74px; height: 74px; display: grid; place-items: center; border-radius: 23px; background: #e3f2ef; font-size: 36px; } #enruta-app .er-stat-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin: 24px 0 35px; } #enruta-app .er-stat-grid div { padding: 20px; border: 1px solid var(--er-line); border-radius: 16px; background: #fff; } #enruta-app .er-stat-grid strong, #enruta-app .er-stat-grid span { display: block; } #enruta-app .er-stat-grid strong { font-size: 28px; } #enruta-app .er-stat-grid span { color: var(--er-muted); font-size: 12px; } #enruta-app .er-logout { margin-top: 24px; padding: 8px 0; border: 0; background: transparent; color: #7c8995; font-size: 11px; text-decoration: underline; } #enruta-app .er-empty { grid-column: 1/-1; padding: 25px; border: 1px dashed #c4d1dc; border-radius: 15px; color: var(--er-muted); text-align: center; } #enruta-app .er-modal-backdrop { position: fixed; z-index: 99999; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(9,29,48,.56); } #enruta-app .er-modal { width: min(520px,100%); max-height: min(90vh,850px); position: relative; overflow: auto; padding: 30px; border-radius: 22px; background: #fff; box-shadow: 0 24px 80px rgba(0,0,0,.25); } #enruta-app .er-modal h2 { margin-bottom: 8px; font-size: 28px; letter-spacing: -.05em; } #enruta-app .er-modal-close { width: 34px; height: 34px; position: absolute; top: 13px; right: 13px; border: 1px solid var(--er-line); border-radius: 50%; background: #fff; color: var(--er-ink); font-size: 23px; line-height: 1; } #enruta-app .er-form { display: grid; gap: 13px; margin-top: 20px; } #enruta-app .er-form label { display: grid; gap: 6px; color: #294459; font-size: 12px; font-weight: 750; } #enruta-app .er-form input, #enruta-app .er-form textarea, #enruta-app .er-form select { width: 100%; min-height: 43px; padding: 10px 12px; border: 1px solid #d8e1e9; border-radius: 11px; outline: none; background: #fbfcfe; color: var(--er-ink); font-size: 13px; } #enruta-app .er-form textarea { min-height: 105px; resize: vertical; } #enruta-app .er-form-note { margin-top: -8px; color: #7d8d9b; font-size: 10px; } #enruta-app .er-form input:focus, #enruta-app .er-form textarea:focus, #enruta-app .er-form select:focus { border-color: #4b9be1; box-shadow: 0 0 0 3px rgba(31,123,205,.12); } #enruta-app .er-muted { color: var(--er-muted); font-size: 13px; } #enruta-app .er-optional { margin-left: 5px; color: #8192a0; font-weight: 500; } #enruta-app .er-label { margin-bottom: -6px; color: #294459; font-size: 12px; font-weight: 750; } #enruta-app .er-avatar-choices { display: flex; flex-wrap: wrap; gap: 8px; } #enruta-app .er-avatar-choice { width: 41px; height: 41px; border: 1px solid #dce5ec; border-radius: 13px; background: #f7fafc; font-size: 20px; } #enruta-app .er-avatar-choice.selected { border: 2px solid var(--er-blue); background: #eaf3ff; } #enruta-app .er-consent { grid-template-columns: 18px 1fr !important; align-items: start; margin: 3px 0; color: #526a7b !important; font-size: 12px !important; line-height: 1.45; font-weight: 500 !important; } #enruta-app .er-consent input { width: 15px; min-height: 15px; margin: 2px 0 0; } #enruta-app .er-consent a { color: #165c72; font-weight: 700; text-decoration: underline; } #enruta-app .er-privacy { margin: -4px 0 0; color: #8494a2; font-size: 10px; text-align: center; } #enruta-app .er-auth-shell { min-height: 100vh; display: grid; place-items: center; padding: 28px 16px; background: linear-gradient(145deg,#e8f3f8,#f5f8fb 55%,#dcebf2); } #enruta-app .er-auth-card { width: min(480px,100%); padding: 28px 34px; border: 1px solid rgba(255,255,255,.9); border-radius: 25px; background: rgba(255,255,255,.95); box-shadow: 0 18px 55px rgba(17,53,83,.13); } #enruta-app .er-brand-mark { color: var(--er-ink); font-size: 28px; font-weight: 850; letter-spacing: -.08em; } #enruta-app .er-brand-mark span { display: block; margin-top: 2px; color: #7890a3; font-size: 9px; letter-spacing: .23em; } #enruta-app .er-auth-art { height: 118px; position: relative; display: grid; place-items: center; overflow: hidden; margin: 18px 0 20px; border-radius: 18px; background: linear-gradient(145deg,#cce4ef,#e0eff1 55%,#bad4e9); } #enruta-app .er-auth-art::before, #enruta-app .er-auth-art::after { content: ""; position: absolute; width: 140%; height: 110px; left: -20%; bottom: -72px; border-radius: 50%; background: #8eb8d3; transform: rotate(-7deg); } #enruta-app .er-auth-art::after { bottom: -91px; background: #5285a9; } #enruta-app .er-auth-art span { z-index: 2; display: grid; width: 46px; height: 46px; place-items: center; border: 2px solid rgba(255,255,255,.85); border-radius: 50%; background: #0870db; color: #fff; font-size: 27px; } #enruta-app .er-auth-card h1 { margin: 0 0 7px; font-size: 30px; line-height: 1.04; letter-spacing: -.06em; } #enruta-app .er-auth-card > .er-muted { margin-bottom: 15px; } #enruta-app .er-toast { position: fixed; z-index: 100000; right: 20px; bottom: 90px; max-width: 370px; padding: 13px 17px; border-radius: 13px; background: #153a55; color: #fff; box-shadow: 0 12px 35px rgba(0,0,0,.2); font-size: 13px; } #enruta-app .er-toast.is-bad { background: #9d4138; } #enruta-app .er-screen { min-height: 100vh; padding: 30px 4vw; background: #0b2742; color: #fff; } #enruta-app .er-screen header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,.2); } #enruta-app .er-screen .er-brand { color: #fff; } #enruta-app .er-screen .er-brand span { color: #9eb5c8; } #enruta-app .er-screen-time { text-align: right; } #enruta-app .er-screen-time strong, #enruta-app .er-screen-time span { display: block; } #enruta-app .er-screen-time strong { font-size: 23px; } #enruta-app .er-screen-time span { color: #a9c0d3; font-size: 11px; } #enruta-app .er-screen-body { width: min(1440px,100%); margin: 25px auto; } #enruta-app .er-screen-title { padding: 10px 0 18px; } #enruta-app .er-screen-title .er-eyebrow { color: #81d8de; } #enruta-app .er-screen-title h1 { margin: 0; color: #fff; font-size: clamp(30px,4vw,54px); letter-spacing: -.05em; } #enruta-app .er-screen-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; } #enruta-app .er-screen-stats div { min-height: 130px; display: grid; grid-template-columns: 52px 1fr; grid-template-rows: 1fr 1fr; align-items: center; padding: 20px; border: 1px solid rgba(255,255,255,.13); border-radius: 17px; background: rgba(255,255,255,.08); } #enruta-app .er-screen-stats b { grid-row: span 2; color: #7fdaea; font-size: 29px; } #enruta-app .er-screen-stats strong { align-self: end; font-size: 32px; line-height: 1; } #enruta-app .er-screen-stats span { align-self: start; color: #b6c9d9; font-size: 12px; } #enruta-app .er-screen-feed { margin-top: 18px; padding: 22px; border-radius: 17px; background: #f3f7fa; color: var(--er-ink); } #enruta-app .er-screen-feed h2 { margin-bottom: 12px; font-size: 20px; } #enruta-app .er-screen-feed article { display: grid; grid-template-columns: 42px 1fr; gap: 12px; padding: 13px 0; border-top: 1px solid var(--er-line); } #enruta-app .er-feed-avatar { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 13px; background: #e2f2ee; font-size: 19px; } #enruta-app .er-screen-feed b { font-size: 12px; } #enruta-app .er-screen-feed p { margin: 3px 0; color: #536a7c; font-size: 12px; } #enruta-app .er-screen-feed small { color: #8293a2; font-size: 10px; } #enruta-app .er-screen footer { width: min(1440px,100%); margin: 25px auto 0; color: #9bb2c5; font-size: 11px; text-align: right; } #enruta-app .er-screen-error { padding: 50px; border-radius: 18px; background: #f5f8fb; color: #922; } /* Persistent navigation, personal progress and event splash */ #enruta-app .er-shell { overflow: visible; } #enruta-app .er-topbar { position: sticky; top: 0; z-index: 100; display: block; min-height: 0; padding: 8px clamp(12px,3vw,34px) 0; background: rgba(255,255,255,.97); box-shadow: 0 4px 16px rgba(18,49,72,.08); backdrop-filter: blur(12px); } #enruta-app .er-brand-row { min-height: 56px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; } #enruta-app .er-app-wordmark img { width: 156px; max-height: 46px; } #enruta-app .er-brand-row > .er-horizon-logo { width: min(210px,28vw); max-height: 46px; } #enruta-app .er-top-actions { justify-self: end; } #enruta-app .er-navigation-row { min-height: 48px; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: stretch; gap: 14px; border-top: 1px solid #edf1f4; } #enruta-app .er-primary-nav { min-width: 0; display: flex; align-items: stretch; gap: clamp(4px,1.5vw,20px); } #enruta-app .er-primary-nav .er-nav-item { min-width: 0; min-height: 46px; display: inline-flex; flex-direction: row; align-items: center; justify-content: center; gap: 7px; padding: 0 10px; border: 0; border-bottom: 3px solid transparent; background: transparent; color: #637789; font-size: 12px; font-weight: 700; white-space: nowrap; } #enruta-app .er-primary-nav .er-nav-item.active { border-bottom-color: #d7a928; color: #173e58; } #enruta-app .er-nav-icon { width: 22px; height: 22px; flex: none; display: inline-grid; place-items: center; color: #56738a; } #enruta-app .er-nav-icon svg { width: 22px; height: 22px; display: block; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } #enruta-app .er-nav-item.active .er-nav-icon { color: #0e888c; } #enruta-app .er-live-status { display: flex; align-items: center; justify-content: flex-end; gap: 11px; padding: 4px 0 4px 12px; border-left: 1px solid #edf1f4; } #enruta-app .er-live-stat { min-width: 43px; text-align: center; } #enruta-app .er-live-stat b, #enruta-app .er-live-stat small { display: block; } #enruta-app .er-live-stat b { color: #173e58; font-size: 15px; line-height: 1.1; } #enruta-app .er-live-stat b i { color: #8597a5; font-size: 10px; font-style: normal; } #enruta-app .er-live-stat small { margin-top: 2px; color: #708495; font-size: 9px; line-height: 1; } #enruta-app .er-live-badges { display: flex; align-items: center; gap: 5px; } #enruta-app .er-live-badge { display: inline-flex; align-items: center; gap: 3px; padding: 3px 7px 3px 4px; border: 1px solid #ead694; border-radius: 999px; background: #fffbec; color: #72591a; } #enruta-app .er-live-badge .er-badge-icon { width: 21px; height: 21px; flex: none; filter: none; opacity: 1; } #enruta-app .er-live-badge small { font-size: 9px; font-weight: 750; white-space: nowrap; } #enruta-app .er-primary-nav .er-shortcut-icon { width: 22px; height: 22px; background: transparent; } #enruta-app .er-primary-nav .er-shortcut-icon svg { width: 22px; height: 22px; } #enruta-app .er-splash { min-height: 100svh; width: 100%; display: grid; place-items: center; overflow: hidden; background: #c8effb; animation: er-splash-in .25s ease-out both; } #enruta-app .er-splash img { display: block; width: 100%; height: 100svh; object-fit: contain; object-position: center; } #enruta-app .er-primary-nav .er-nav-sprite, #enruta-app .er-primary-nav .er-nav-item[data-tab="home"] .er-nav-icon::before { display: none; } @keyframes er-splash-in { from { opacity: .5; } to { opacity: 1; } } @media (max-width: 760px) { #enruta-app .er-topbar { padding: 5px 10px 0; } #enruta-app .er-brand-row { min-height: 49px; grid-template-columns: 1fr auto 1fr; gap: 6px; } #enruta-app .er-app-wordmark img { width: clamp(100px,30vw,145px); max-height: 38px; } #enruta-app .er-brand-row > .er-horizon-logo { width: clamp(116px,36vw,190px); max-height: 38px; } #enruta-app .er-profile { min-width: 32px; padding: 2px; border: 0; background: transparent; } #enruta-app .er-profile > span:not(.er-symbol-avatar) { display: none; } #enruta-app .er-navigation-row { grid-template-columns: 1fr; gap: 0; } #enruta-app .er-primary-nav { width: 100%; overflow-x: auto; justify-content: space-between; gap: 3px; scrollbar-width: none; } #enruta-app .er-primary-nav::-webkit-scrollbar { display: none; } #enruta-app .er-primary-nav .er-nav-item { flex: 1 0 auto; min-height: 43px; gap: 4px; padding: 0 7px; font-size: 10px; } #enruta-app .er-primary-nav .er-nav-icon, #enruta-app .er-primary-nav .er-nav-icon svg { width: 19px; height: 19px; } #enruta-app .er-live-status { min-height: 37px; justify-content: center; gap: 12px; padding: 3px 0 5px; border-top: 1px solid #f0f3f5; border-left: 0; } #enruta-app .er-live-stat { min-width: 44px; display: flex; align-items: baseline; justify-content: center; gap: 4px; } #enruta-app .er-live-stat b { font-size: 13px; } #enruta-app .er-live-stat small { font-size: 9px; } #enruta-app .er-live-badges { max-width: 48vw; overflow-x: auto; } #enruta-app .er-live-badge { padding: 2px 6px 2px 3px; } #enruta-app .er-live-badge .er-badge-icon { width: 18px; height: 18px; } #enruta-app .er-live-badge small { font-size: 8px; } } @media (max-width: 860px) { #enruta-app .er-main { width: min(100% - 32px,1120px); } #enruta-app .er-welcome { grid-template-columns: 1fr; } #enruta-app .er-progress { justify-content: flex-start; } #enruta-app .er-shortcuts { grid-template-columns: repeat(2,1fr); } #enruta-app .er-route-grid { grid-template-columns: repeat(2,1fr); } #enruta-app .er-screen-stats { grid-template-columns: repeat(2,1fr); } } @media (max-width: 560px) { #enruta-app .er-shell { border-radius: 0; } #enruta-app .er-topbar { min-height: 62px; padding: 10px 15px; } #enruta-app .er-brand { font-size: 21px; } #enruta-app .er-event-name { display: none; } #enruta-app .er-main { width: calc(100% - 28px); padding-top: 18px; } #enruta-app .er-welcome { padding: 21px; } #enruta-app .er-shortcuts { gap: 9px; margin: 12px 0 27px; } #enruta-app .er-shortcuts button { min-height: 93px; padding: 12px; grid-template-columns: 34px 1fr; column-gap: 9px; } #enruta-app .er-shortcuts button > span:first-child { width: 34px; height: 34px; font-size: 18px; } #enruta-app .er-shortcuts small { font-size: 9px; } #enruta-app .er-section-head h2 { font-size: 21px; } #enruta-app .er-route-grid { grid-template-columns: 1fr; } #enruta-app .er-route-content p { min-height: auto; } #enruta-app .er-challenge-peek { padding: 16px; } #enruta-app .er-challenge-row { grid-template-columns: 1fr; } #enruta-app .er-challenge-card { gap: 9px; padding: 10px; } #enruta-app .er-challenge-copy b { font-size: 11px; } #enruta-app .er-challenge-action { padding: 7px; } #enruta-app .er-screen-callout { align-items: flex-start; flex-direction: column; padding: 18px; } #enruta-app .er-page-head { align-items: flex-start; flex-direction: column; } #enruta-app .er-program-item { grid-template-columns: 92px 1fr; gap: 10px; } #enruta-app .er-program-item time { min-width: 78px; font-size: 10px; } #enruta-app .er-map-note { align-items: flex-start; flex-direction: column; } #enruta-app .er-stat-grid { gap: 7px; } #enruta-app .er-stat-grid div { padding: 13px; } #enruta-app .er-modal { padding: 26px 20px; } #enruta-app .er-auth-card { padding: 23px 20px; } #enruta-app .er-screen { padding: 20px 14px; } #enruta-app .er-screen-stats { gap: 8px; } #enruta-app .er-screen-stats div { min-height: 105px; grid-template-columns: 38px 1fr; padding: 12px; } #enruta-app .er-screen-stats b { font-size: 23px; } #enruta-app .er-screen-stats strong { font-size: 25px; } #enruta-app .er-screen-time strong { font-size: 18px; } #enruta-app .er-screen-feed { padding: 15px; } } /* Final cascade overrides for the fixed app header */ #enruta-app .er-shell { overflow: visible; } #enruta-app .er-topbar { position: sticky; top: 0; z-index: 100; display: flex; flex-direction: column; min-height: 0; padding: 8px clamp(12px,3vw,34px) 0; background: rgba(255,255,255,.97); box-shadow: 0 4px 16px rgba(18,49,72,.08); backdrop-filter: blur(12px); } @media (max-width: 760px) { #enruta-app .er-topbar { min-height: 0; padding: 5px 10px 0; } } /* Identidad visual global En Ruta · Horizonte Rural */ #enruta-app .er-shell { display: flex; flex-direction: column; min-height: 100vh; } #enruta-app .er-main { flex: 1 0 auto; padding-bottom: 38px; } #enruta-app .er-bottom-nav { position: relative; inset: auto; z-index: 3; flex: none; } #enruta-app .er-topbar { display: grid; grid-template-columns: minmax(130px,1fr) auto minmax(190px,1fr); justify-content: initial; } #enruta-app .er-app-wordmark { display: inline-flex; align-items: center; width: max-content; } #enruta-app .er-app-wordmark img { display: block; width: 176px; max-height: 60px; object-fit: contain; object-position: left center; } #enruta-app .er-horizon-logo { display: block; width: min(265px,32vw); max-height: 64px; object-fit: contain; } #enruta-app .er-top-actions { justify-self: end; } #enruta-app .er-partner-footer { flex: none; width: 100%; min-height: 74px; display: grid; place-items: center; padding: 10px 22px; border-top: 1px solid var(--er-line); background: #fff; } #enruta-app .er-partner-footer img { display: block; width: min(820px,96%); max-height: 54px; object-fit: contain; } #enruta-app .er-home-cover { width: 100%; max-height: 190px; display: block; margin: 0 0 22px; border-radius: 20px; object-fit: cover; object-position: center 50%; } #enruta-app .er-avatar-choices { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 8px; } #enruta-app .er-avatar-choice { width: 100%; aspect-ratio: 1; min-width: 0; height: auto; display: grid; place-items: center; padding: 4px; border-radius: 14px; } #enruta-app .er-avatar-sprite { display: block; width: 100%; height: 100%; border-radius: 10px; background-image: url("avatar-symbols.png"); background-size: 500% 200%; background-repeat: no-repeat; } #enruta-app .er-avatar-sprite-1 { background-position: 0% 0%; } #enruta-app .er-avatar-sprite-2 { background-position: 25% 0%; } #enruta-app .er-avatar-sprite-3 { background-position: 50% 0%; } #enruta-app .er-avatar-sprite-4 { background-position: 75% 0%; } #enruta-app .er-avatar-sprite-5 { background-position: 100% 0%; } #enruta-app .er-avatar-sprite-6 { background-position: 0% 100%; } #enruta-app .er-avatar-sprite-7 { background-position: 25% 100%; } #enruta-app .er-avatar-sprite-8 { background-position: 50% 100%; } #enruta-app .er-avatar-sprite-9 { background-position: 75% 100%; } #enruta-app .er-avatar-sprite-10 { background-position: 100% 100%; } #enruta-app .er-symbol-avatar { flex: none; background-color: #edf6fb; } #enruta-app .er-profile-avatar { width: 30px; height: 30px; border-radius: 9px; } #enruta-app .er-mini-avatar { width: 24px; height: 24px; border-radius: 8px; } #enruta-app .er-welcome-avatar { display: inline-block; width: 34px; height: 34px; vertical-align: middle; border-radius: 10px; } #enruta-app .er-avatar-large { padding: 0; overflow: hidden; } #enruta-app .er-avatar-large-symbol { width: 100%; height: 100%; border-radius: 23px; } #enruta-app .er-feed-avatar.er-symbol-avatar { width: 38px; height: 38px; border-radius: 13px; } #enruta-app .er-legacy-avatar { display: inline-grid; place-items: center; } #enruta-app .er-auth-shell { display: flex; flex-direction: column; min-height: 100vh; place-items: unset; padding: 0; } #enruta-app .er-auth-header { flex: none; min-height: 76px; display: grid; place-items: center; padding: 10px 20px; background: #fff; border-bottom: 1px solid var(--er-line); } #enruta-app .er-auth-header .er-horizon-logo { width: min(280px,65vw); max-height: 68px; } #enruta-app .er-auth-stage { flex: 1 0 auto; display: grid; place-items: center; padding: 24px 16px; } #enruta-app .er-auth-card { width: min(620px,100%); padding: 24px 30px; } #enruta-app .er-app-logo { display: block; width: min(180px,55%); max-height: 68px; margin: 0 auto 14px; object-fit: contain; } #enruta-app .er-auth-cover { width: 100%; height: clamp(115px,20vw,190px); display: block; margin: 0 0 19px; border-radius: 16px; object-fit: cover; object-position: center; } #enruta-app .er-auth-card .er-eyebrow { margin-bottom: 6px; } #enruta-app .er-screen { display: flex; flex-direction: column; } #enruta-app .er-screen-topbar { display: grid; grid-template-columns: minmax(150px,1fr) auto minmax(150px,1fr); align-items: center; gap: 20px; padding-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,.2); } #enruta-app .er-screen-app-logo { width: 176px; max-height: 60px; object-fit: contain; object-position: left center; } #enruta-app .er-screen .er-horizon-logo { width: min(265px,32vw); } #enruta-app .er-screen-time { justify-self: end; } #enruta-app .er-screen .er-partner-footer { background: rgba(255,255,255,.96); border-radius: 14px; } #enruta-app .er-screen .er-partner-footer img { max-height: 58px; } /* Route artwork, detail pages and explicit contribution actions */ #enruta-app .er-nav-sprite { width: 24px; height: 24px; display: block; background-image: var(--er-nav-icons); background-size: 200% 200%; background-repeat: no-repeat; } #enruta-app .er-nav-sprite-home { background-position: 0 0; background-image: none; } #enruta-app .er-nav-sprite-routes { background-position: 100% 0; } #enruta-app .er-nav-sprite-challenges { background-position: 0 100%; } #enruta-app .er-nav-sprite-program { background-position: 0 0; } #enruta-app .er-nav-sprite-activity { background-position: 100% 100%; } #enruta-app .er-nav-item[data-tab="home"] .er-nav-icon::before { content: "⌂"; font-size: 23px; } #enruta-app .er-shortcut-icon { width: 42px; height: 42px; grid-row: span 2; display: grid; place-items: center; border-radius: 14px; background: #e6f5fc; } #enruta-app .er-shortcuts button:nth-child(2) .er-shortcut-icon { background: #e3f5ee; } #enruta-app .er-shortcuts button:nth-child(3) .er-shortcut-icon { background: #f4eafe; } #enruta-app .er-shortcuts button:nth-child(4) .er-shortcut-icon { background: #e9efff; } #enruta-app .er-shortcuts .er-nav-sprite { width: 28px; height: 28px; } #enruta-app .er-route-art { container-type: inline-size; height: 145px; min-height: 0; background-color: #f7f5ec; background-image: var(--er-route-sheet); background-size: auto 600%; background-repeat: no-repeat; background-position-x: 50%; } #enruta-app .er-route-art-1 { background-position-y: 0; } #enruta-app .er-route-art-2 { background-position-y: 20%; } #enruta-app .er-route-art-3 { background-position-y: 40%; } #enruta-app .er-route-art-4 { background-position-y: 60%; } #enruta-app .er-route-art-5 { background-position-y: 80%; } #enruta-app .er-route-art-6 { background-position-y: 100%; } #enruta-app .er-route-card .er-route-art { height: 145px; } #enruta-app .er-route-art-new { display: grid; place-items: center; background: linear-gradient(135deg,#e7f3f2,#eaf0fa 52%,#fff6df); } #enruta-app .er-route-art-new span { color: #147b83; font-size: 64px; font-weight: 300; } #enruta-app .er-route-content h3 { min-height: 42px; } #enruta-app .er-route-content p { min-height: 54px; } #enruta-app .er-route-card.is-new-route { border-color: #e6ca7b; } #enruta-app .er-new-route-label { display: inline-block; margin-bottom: 8px; padding: 5px 9px; border-radius: 999px; background: #fff4d3; color: #7e5b08; font-size: 10px; font-weight: 800; } #enruta-app .er-card-actions { justify-content: flex-start; gap: 8px; } #enruta-app .er-route-card .er-card-actions { display: grid; grid-template-columns: 1fr; } #enruta-app .er-card-actions .er-button { white-space: nowrap; } #enruta-app .er-button-outline { border: 1px solid #cbd9e3; background: #fff; color: var(--er-ink); } #enruta-app .er-button-outline:hover { background: #f1f6f8; } #enruta-app .er-route-section { margin: 28px 0 38px; } #enruta-app .er-route-section .er-section-head h2 { display: flex; align-items: center; gap: 10px; } #enruta-app .er-route-section .er-section-head p:not(.er-eyebrow) { margin: 5px 0 0; color: var(--er-muted); font-size: 12px; } #enruta-app .er-count-pill { display: inline-grid; min-width: 25px; height: 25px; place-items: center; padding: 0 7px; border-radius: 999px; background: #e8f3f5; color: #147b83; font-size: 12px; } #enruta-app .er-community-routes { padding: 24px; border: 1px dashed #d9c27d; border-radius: 20px; background: #fffcf2; } #enruta-app .er-detail-back { margin-bottom: 15px; } #enruta-app .er-route-detail-hero { display: grid; grid-template-columns: minmax(260px,.9fr) 1.1fr; overflow: hidden; margin-bottom: 24px; border: 1px solid var(--er-line); border-radius: 22px; background: #fff; } #enruta-app .er-route-art.is-large { height: auto; min-height: 0; aspect-ratio: 2.4 / 1; } #enruta-app .er-route-detail-copy { align-self: center; padding: 28px; } #enruta-app .er-route-detail-copy h1 { margin: 0 0 10px; font-size: clamp(28px,4vw,42px); line-height: 1.05; letter-spacing: -.05em; } #enruta-app .er-route-detail-copy > p:not(.er-eyebrow) { margin-bottom: 20px; color: var(--er-muted); } #enruta-app .er-route-background, #enruta-app .er-route-contributions { margin: 24px 0; padding: 25px; border: 1px solid var(--er-line); border-radius: 20px; background: #fff; } #enruta-app .er-route-background h2, #enruta-app .er-route-contributions h2 { margin-bottom: 8px; font-size: 23px; } #enruta-app .er-route-background > p:not(.er-eyebrow) { max-width: 850px; color: #51677a; font-size: 14px; } #enruta-app .er-route-question { display: grid; gap: 4px; margin-top: 18px; padding: 16px 18px; border-left: 4px solid #e6b838; border-radius: 0 12px 12px 0; background: #fff8e4; color: #45586a; font-size: 13px; } #enruta-app .er-contribution-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 23px; } #enruta-app .er-contribution-tabs a { padding: 8px 12px; border: 1px solid var(--er-line); border-radius: 999px; color: #34536c; font-size: 12px; font-weight: 750; text-decoration: none; } #enruta-app .er-contribution-tabs a span { margin-left: 4px; color: #147b83; } #enruta-app .er-contribution-group { display: grid; grid-template-columns: 180px 1fr; gap: 18px; padding: 20px 0; border-top: 1px solid var(--er-line); scroll-margin-top: 18px; } #enruta-app .er-contribution-group h3 { margin: 0 0 4px; font-size: 17px; } #enruta-app .er-contribution-group > div:first-child p { margin: 0; color: var(--er-muted); font-size: 11px; } #enruta-app .er-contribution-feed { display: grid; gap: 10px; } #enruta-app .er-contribution-entry { display: grid; grid-template-columns: 36px 1fr; gap: 10px; padding: 13px; border-radius: 13px; background: #f6f9fb; } #enruta-app .er-contribution-avatar { width: 34px; height: 34px; display: grid; place-items: center; overflow: hidden; border-radius: 11px; background-color: #e6f3f1; font-size: 17px; } #enruta-app .er-contribution-entry b { display: block; margin-bottom: 3px; font-size: 12px; } #enruta-app .er-contribution-entry p { margin: 0 0 4px; color: #415b70; font-size: 13px; white-space: pre-wrap; } #enruta-app .er-contribution-entry small { color: #8495a2; font-size: 10px; } #enruta-app .er-route-check-list { display: grid; gap: 8px; max-height: 43vh; overflow: auto; margin: 18px 0; } #enruta-app .er-route-check-list article { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px; border: 1px solid var(--er-line); border-radius: 12px; } #enruta-app .er-route-check-list article > div { display: flex; align-items: center; gap: 10px; min-width: 0; } #enruta-app .er-route-check-list .er-route-art { width: 58px; height: 48px; min-height: 0; flex: none; border-radius: 8px; } #enruta-app .er-route-check-list b { font-size: 12px; } #enruta-app .er-route-check-list p { margin: 2px 0 0; color: var(--er-muted); font-size: 10px; } #enruta-app .er-route-check-actions { display: flex; justify-content: flex-end; gap: 9px; flex-wrap: wrap; } @media (max-width: 860px) { #enruta-app .er-topbar { grid-template-columns: 120px 1fr 90px; gap: 8px; } #enruta-app .er-app-wordmark img { width: 112px; max-height: 58px; } #enruta-app .er-horizon-logo, #enruta-app .er-screen .er-horizon-logo { width: min(205px,43vw); max-height: 58px; } #enruta-app .er-top-actions { gap: 0; } #enruta-app .er-event-name { display: none; } #enruta-app .er-route-grid { grid-template-columns: repeat(2,1fr); } #enruta-app .er-route-detail-hero { grid-template-columns: 1fr; } #enruta-app .er-route-art.is-large { height: auto; min-height: 0; aspect-ratio: 2.4 / 1; } } @media (max-width: 560px) { #enruta-app .er-topbar { min-height: 62px; grid-template-columns: 100px 1fr 50px; padding: 8px 10px; } #enruta-app .er-app-wordmark img { width: 92px; max-height: 50px; } #enruta-app .er-horizon-logo, #enruta-app .er-screen .er-horizon-logo { width: min(180px,47vw); max-height: 52px; } #enruta-app .er-profile { padding: 4px; border: 0; background: transparent; } #enruta-app .er-profile > span:last-child { display: none; } #enruta-app .er-route-grid { grid-template-columns: 1fr; } #enruta-app .er-route-detail-copy { padding: 20px; } #enruta-app .er-route-background, #enruta-app .er-route-contributions { padding: 17px; } #enruta-app .er-contribution-group { grid-template-columns: 1fr; gap: 10px; } #enruta-app .er-route-check-actions { flex-direction: column-reverse; } #enruta-app .er-route-check-actions .er-button { width: 100%; } #enruta-app .er-card-actions { flex-wrap: wrap; } #enruta-app .er-auth-header { min-height: 62px; } #enruta-app .er-auth-stage { padding: 14px 10px; } #enruta-app .er-auth-card { padding: 18px 16px; border-radius: 19px; } #enruta-app .er-auth-cover { height: 112px; margin-bottom: 14px; } #enruta-app .er-home-cover { max-height: 140px; border-radius: 15px; } #enruta-app .er-avatar-choices { gap: 6px; } #enruta-app .er-avatar-choice { padding: 3px; border-radius: 11px; } #enruta-app .er-avatar-sprite { border-radius: 8px; } #enruta-app .er-partner-footer { min-height: 62px; padding: 8px 12px; } #enruta-app .er-partner-footer img { max-height: 45px; } #enruta-app .er-screen-topbar { grid-template-columns: 56px 1fr 60px; gap: 8px; } #enruta-app .er-screen-app-logo { width: 70px; } #enruta-app .er-screen-time strong { font-size: 15px; } #enruta-app .er-screen-time span { font-size: 9px; } } /* Keep iOS Safari from zooming when a form field receives focus. */ @media (max-width: 760px) { #enruta-app .er-form input, #enruta-app .er-form textarea, #enruta-app .er-form select { font-size: 16px; } } /* Home routes are compact, numbered launch buttons; detailed artwork stays in Rutas. */ #enruta-app .er-home-route-list { width: 100%; min-width: 0; display: grid; gap: 8px; } #enruta-app .er-home-route-button { width: 100%; min-width: 0; min-height: 68px; display: grid; grid-template-columns: 42px minmax(0,1fr) 28px; align-items: center; gap: 14px; padding: 12px 16px; border: 1px solid var(--er-line); border-radius: 14px; background: #fff; color: var(--er-ink); text-align: left; cursor: pointer; transition: background .15s, border-color .15s, transform .15s; } #enruta-app .er-home-route-button:hover { transform: translateY(-1px); border-color: #8db9c0; background: #f8fbfa; } #enruta-app .er-home-route-button.is-new-route { border-color: #e6ca7b; background: #fffcf2; } #enruta-app .er-home-route-number { color: #148a83; font-size: 16px; font-weight: 850; letter-spacing: .04em; } #enruta-app .er-home-route-copy { min-width: 0; overflow-wrap: anywhere; } #enruta-app .er-home-route-copy b, #enruta-app .er-home-route-copy small { display: block; } #enruta-app .er-home-route-copy b { margin-bottom: 2px; font-size: 14px; } #enruta-app .er-home-route-copy small { color: var(--er-muted); font-size: 11px; line-height: 1.35; } #enruta-app .er-home-route-arrow { justify-self: end; color: #148a83; font-size: 20px; } @media (max-width: 560px) { #enruta-app .er-home-route-button { grid-template-columns: 34px 1fr 22px; gap: 10px; padding: 11px 12px; } #enruta-app .er-home-route-copy small { font-size: 10px; } } /* Keep the participant menu stacked, sticky and above all page content. */ #enruta-app .er-shell { overflow: visible; } #enruta-app .er-topbar { position: sticky; top: 0; z-index: 100; display: flex; flex-direction: column; min-height: 0; padding: 8px clamp(12px,3vw,34px) 0; background: rgba(255,255,255,.97); box-shadow: 0 4px 16px rgba(18,49,72,.08); backdrop-filter: blur(12px); } @media (max-width: 760px) { #enruta-app .er-topbar { min-height: 0; padding: 5px 10px 0; } }