/* INFO screen (phones): a tab row, then the borrowed window content on the windows' green.
   Everything is scoped under .app-screen--info. */
.app-screen--info {
    display: flex;
    flex-direction: column;
    background: #006D4F;
    color: #ffffff;
    font-family: var(--font-family);
}

/* Tabs: text with a yellow underline on the one that is showing */
.app-screen--info .info-tabs {
    flex: 0 0 auto;
    display: flex;
    padding: env(safe-area-inset-top, 0px) max(4px, env(safe-area-inset-right, 0px)) 0 max(4px, env(safe-area-inset-left, 0px));
    border-bottom: 2px solid rgba(255, 255, 255, 0.35);
}

.app-screen--info .info-tab {
    flex: 1 1 0;
    min-width: 0;
    min-height: 52px;
    padding: 6px 4px 0;
    margin: 0 0 -2px;
    font-family: var(--font-family);
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #d3f0e6;
    background: transparent;
    border: 0;
    border-bottom: 4px solid transparent;
    cursor: pointer;
    white-space: nowrap;
}

.app-screen--info .info-tab[aria-selected="true"] {
    color: #ffffff;
    border-bottom-color: #f9e243;
}

.app-screen--info .info-tab:focus-visible {
    outline: var(--focus-outline, 3px solid #f9e243);
    outline-offset: -3px;
}

.app-screen--info .info-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
}

/* the window content scrolls with the screen, not inside itself */
.app-screen--info .info-panel .modal-content {
    overflow: visible;
    padding-top: 20px;
}

/* ABOUT: room above the badge */
.app-screen--info .info-panel--about .modal-content {
    padding-top: 36px;
}

/* Landscape phones: a shorter tab row leaves the height to the content */
@media (max-height: 499px) {
    .app-screen--info .info-tab { min-height: 44px; padding-top: 4px; }
    .app-screen--info .info-panel--about .modal-content { padding-top: 24px; }
}

.app-screen--info [hidden] { display: none !important; }

/* ABOUT: the tabs replace the RACE DETAILS button, so WEBSITE TOUR and COURSE GPX share the row */
.app-screen--info .info-panel--about [data-modal="race-details"] { display: none; }
.app-screen--info .info-panel--about .modal-gpx { grid-column: auto; }