@media screen and (min-width:650px) {
	.schedule {
		display: grid;
		grid-gap: 1em;
		grid-template-rows:
			[tracks] auto
      [time-0900] auto
      [time-0915] auto
			[time-0930] auto
			[time-0945] auto
			[time-1000] auto
			[time-1015] auto
			[time-1030] auto
			[time-1045] auto
			[time-1100] auto
			[time-1115] auto
			[time-1130] auto
      [time-1145] auto
			[time-1200] auto
			[time-1215] auto
			[time-1230] auto
			[time-1245] auto
			[time-1300] auto
			[time-1315] auto
			[time-1330] auto
      [time-1345] auto
			[time-1400] auto
			[time-1415] auto
			[time-1430] auto
			[time-1445] auto
			[time-1500] auto
			[time-1515] auto
			[time-1530] auto
      [time-1545] auto
			[time-1600] auto
			[time-1615] auto
			[time-1630] auto
			[time-1645] auto
			[time-1700] auto
			[time-1730] auto
			[time-1800] auto
			[time-1900] auto
			[time-2000] auto
      ;
		
		grid-template-columns:
			[times] 4em
			[track-1-start] 1fr
			[track-1-end track-2-start] 1fr
			[track-2-end track-3-start] 1fr
			[track-3-end track-4-start] 1fr
			[track-4-end];
	}



	.schedule.lead-in {
		display: grid;
		grid-gap: 1em;
		grid-template-rows:
			[tracks] auto
			[time-0930] auto
			[time-1700] auto
      ;
	}  

  
}



.time-slot {
	grid-column: times;
}

.track-slot {
	display: none; 
}

@supports( display:grid ) {
	@media screen and (min-width:650px) {
		.track-slot {
			display: block;
			padding: 10px 5px 5px;
			position: sticky;
			top: 0;
			z-index: 1000;
			background-color: rgba(255,255,255,.9);
		}
	}
}

.session {
	margin-bottom:  1em;
}

@supports( display:grid ) {
	@media screen and (min-width: 650px) {
		.session {
			margin: 0;
		}	
	}
}

:root {
    --color-housing: #ac3b3b;
    --color-open-business: #428124;
    --color-open-science: #2c6499;
    --color-pd: rgb(172, 140, 44);
    --color-everyone: #7b297e;
    --color-break: #ccc;
}

.schedule-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 40px;
    row-gap: 10px;
    margin-bottom: 20px;
    background-color: #fff;
    padding: 10px;
}

.legend-item {
    display: flex;
    align-items: center;
    font-size: 0.8em;
    margin-bottom: 5px;
}

@media screen and (max-width: 649px) {
    .legend-item {
        font-size: 0.7em;
    }
}

.legend-color-split {
    width: 20px;
    height: 20px;
    margin-right: 5px;
    position: relative;
    overflow: hidden;
}

.legend-color-triangle {
    position: absolute;
    width: 100%;
    height: 100%;
}

.legend-color-triangle:first-child {
    clip-path: polygon(0 0, 0% 100%, 100% 0);
}

.legend-color-triangle:last-child {
    clip-path: polygon(100% 100%, 3% 100%, 100% 3%);
    opacity: 0.7;
}

.legend-item.track-housing .legend-color-triangle { background-color: var(--color-housing); }
.legend-item.track-open-business .legend-color-triangle { background-color: var(--color-open-business); }
.legend-item.track-open-science .legend-color-triangle { background-color: var(--color-open-science); }
.legend-item.track-pd .legend-color-triangle { background-color: var(--color-pd); }
.legend-item.track-everyone .legend-color-triangle { background-color: var(--color-everyone); }

.legend-explanation {
    font-style: italic;
    margin-top: 10px;
    margin-bottom: 14px;
}

.language-toggle {
    text-align: center;
    margin-bottom: 20px;
    cursor: pointer;
    color: #2c6499;
    text-decoration: underline;
}

@media screen and (max-width: 649px) {
    #schedule-container {        
        display: flex;
        flex-direction: column;
    }

    .schedule-legend {
        order: -1;
        margin-bottom: 10px;
    }

    #day-selector {
        margin-bottom: 10px;
        font-size: 16px;
        padding: 5px;
        position: sticky;
        top: 5px; 
        z-index: 1000;
        background-color: #fff;
    }

    #schedules {
        flex-grow: 1;
        overflow-y: auto;
    }
}

@media screen and (min-width: 650px) {
    #day-selector {
        display: none;
    }

    #schedules {
        display: flex;
        flex-direction: column;
    }

    .day-schedule {
        margin-bottom: 40px;
    }
}

.session {
	padding: .5em;
	border-radius: 2px;
	font-size: 13px;
	box-shadow:
		rgba(255,255,255,.6) 1px 1px 0,
		rgba(0,0,0,.3) 4px 4px 0;
}

.session-title,
.session-time,
.session-track,
.session-presenter {
	display: block;
}

.session-location {
    display: none;
}

@media screen and (max-width: 649px) {
    .session-location {
        display: block;
    }
}

.session-title,
.time-slot {
	margin: 0;
	font-size: 0.9em;
}

.session {
	padding: .5em;
	border-radius: 2px;
	font-size: 13px;
	box-shadow:
		rgba(255,255,255,.6) 1px 1px 0,
		rgba(0,0,0,.3) 4px 4px 0;
	cursor: pointer;
	transition: transform 0.1s ease-in-out;
}

.session:hover {
	transform: scale(1.02);
}

.session:focus {
	outline: 2px dotted rgba(255,255,255,.8);
}

.session-title, .session-title a {
	color: #fff;
	text-decoration: none;
}

.session-title a:hover, .session-title a:focus {
	color: #fff;
	text-decoration: none;
}

.track-slot {
	font-weight: bold;
	font-size: 1em;
}

.time-slot {
	font-weight: bold;
	font-size: 0.8em;
}

.translation-note {
    font-style: italic;
    font-size: 0.9em;
    margin-top: 5px;
    margin-bottom: 10px;
}

.day-location {
    font-size: 1.2em;
    margin-top: 0;
    margin-bottom: 15px;
}

.day-location a {
    color: #2c6499;
    text-decoration: none;
}

.day-location a:hover {
    text-decoration: underline;
}

#schedule-heading-2024-10-29,
#schedule-heading-2024-10-30,
#schedule-heading-2024-10-31 {
    margin-bottom: 5px;
}

.track-housing {
	background-color: var(--color-housing);
	color: #fff;
}

.track-open-business {
	background-color: var(--color-open-business);
	color: #fff;
}

.track-open-science {
	background-color: var(--color-open-science);
	color: #fff;
}

.track-pd {
	background-color: var(--color-pd);
	color: #fff;
}

.track-break {
	display: flex;
	justify-content: center;
	align-items: center;
	background: var(--color-break);
	color: #000;
	box-shadow: none;
}

.track-break .session-title,
.track-break .session-title a {
	color: #000;
}

.track-everyone {
	background-color: var(--color-everyone);
	color: #fff;
}

.is-virtual {
	opacity: 0.7;
}

.text {
	max-width: 750px;
	font-size: 18px;
	margin: 0 auto 50px;
}

.meta {
	color: #555;
	font-style: italic;
}

.meta a {
	color: #555;
}

.mobile-nav-links {
    display: none;
    margin-top: 40px;
    text-align: center;
}

.mobile-nav-links a {
    display: block;
    margin: 15px 0;
    padding: 12px;
    background-color: #f0f0f0;
    color: #2c6499; 
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

@media (max-width: 649px) {
    .mobile-nav-links {
        display: block;
    }
}