/* Recordings index */
.rec_search {
    width: clamp(200px, 60%, 750px);
    margin:0 auto 1.5rem auto;
}
@media screen and (max-width: 600px) {
    .rec_search { width:100%; }
}

#recording_list {
    display: grid;
    grid-template-columns: repeat(4, minmax(250px, 1fr));
    justify-content: space-around;
    gap: 2rem 1.5rem;
    line-height: 1.4;
    margin-bottom: 1.5rem;
}
#recording_list a.rec {
    position: relative;
    padding: 0 0.75rem 2rem 0.75rem;
    color: #30303f;
    background-color:#fff;
    border: 1px solid #c0c0c7;
    cursor: pointer;
    text-decoration: none;
    transition: box-shadow 0.25s;
}
#recording_list a.rec:hover { box-shadow: 1px 1px 6px #c0c0c7; }

#recording_list a.rec img.poster {
    display: block;
    position: relative;
    left: -0.75rem;
    width:calc(100% + 1.5rem);
    max-width:none;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid #c0c0c7;
}
#recording_list a.rec .name { font-size:1.2rem; font-weight:bold; margin-bottom:0.1rem; }
#recording_list a.rec:hover .name { color:#0060b7; }
#recording_list a.rec .series { font-weight:bold; margin-bottom:0.25rem; }
#recording_list a.rec .speaker { font-style: italic; }
#recording_list a.rec .date { font-size:0.9rem; color:#909097; position:absolute; right:0.75rem; bottom:0.4rem; }
#recording_list a.rec .info { font-size:0.9rem; color:#909097; position:absolute; bottom:0.4rem; }
#empty_recording_list { text-align:center; display:none; }

@media screen and (max-width: 1199px) {
    #recording_list { grid-template-columns: repeat(3, minmax(250px, 1fr)); }
}
@media screen and (max-width: 899px) {
    #recording_list { grid-template-columns: repeat(2, minmax(250px, 1fr)); }
    #recording_list a.rec .name { font-size: 1.0rem; }
}
@media screen and (max-width: 599px) {
    #recording_list { grid-template-columns: repeat(1, minmax(250px, 1fr)); }
}

/* OnePage page breaks */
@media screen and (max-width: 1419px) {
    .tcoco-loader #recording_list { grid-template-columns: repeat(3, minmax(250px, 1fr)); }
}
@media screen and (max-width: 1149px) {
    .tcoco-loader #recording_list { grid-template-columns: repeat(2, minmax(250px, 1fr)); }
}
@media screen and (max-width: 630px) {
    .tcoco-loader #recording_list { grid-template-columns: repeat(1, minmax(250px, 1fr)); }
}

#recording_pages {
    display: flex;
    flex-wrap: wrap;
    gap: 0 2rem;
    padding: 0 2rem;
    margin-bottom: 2rem;
}
#recording_pages > #page_list {
    flex-grow: 1;
    text-align: right;
    line-height: 2rem;
    white-space: nowrap;
}

#recording_pages input#page_num {
    font-family: inherit;
    font-size: inherit;
    width: 2rem;
    padding: 4px;
    text-align: center;
    margin-bottom: 0.75rem;
}
#recording_pages #page_size {
    font-family: inherit;
    font-size: inherit;
    padding:4px;
    margin-left: 1rem;
    width: 190px;
}
#recording_pages .cur_page {
    color: #606060;
    font-weight: bold;
}

@media screen and (max-width: 800px) {
    #recording_pages {
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: center;
        padding: 0;
    }
}
@media screen and (max-width: 600px) {
    #recording_pages #page_key { text-align:center; margin-bottom:0.5rem; }
    #recording_pages > #page_list { white-space:wrap; text-align: center; }
}



/* Mutual Components */
.restricted { position:relative; padding-left:1.25rem; }
.restricted::before {
    content:' ';
    display:block;
    position:absolute; left:0; width:1em; height:1em;
    background:currentColor;
    mask-size:cover; -webkit-mask-size:cover;
    mask-image:url('data:image/svg+xml;charset=utf-8,<svg width="24" height="24" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16 12H17.4C17.7314 12 18 12.2686 18 12.6V19.4C18 19.7314 17.7314 20 17.4 20H6.6C6.26863 20 6 19.7314 6 19.4V12.6C6 12.2686 6.26863 12 6.6 12H8M16 12V8C16 6.66667 15.2 4 12 4C8.8 4 8 6.66667 8 8V12M16 12H8" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    -webkit-mask-image:url('data:image/svg+xml;charset=utf-8,<svg width="24" height="24" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16 12H17.4C17.7314 12 18 12.2686 18 12.6V19.4C18 19.7314 17.7314 20 17.4 20H6.6C6.26863 20 6 19.7314 6 19.4V12.6C6 12.2686 6.26863 12 6.6 12H8M16 12V8C16 6.66667 15.2 4 12 4C8.8 4 8 6.66667 8 8V12M16 12H8" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}

.download_file_list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    margin-bottom: 1rem;
}
.download_file_list a {
    padding: 0.5rem 2rem 0.5rem 1rem;
    color: #333;
    border: 1px solid #999;
    border-radius: 0.33rem;
    background: #f0f0f7;
    position: relative;
    text-decoration: none;
}
.download_file_list a::after {
    content: ' ';
    display: block;
    position: absolute;
    right: 10px;
    top: 10px;
    background: currentColor;
    mask-size: cover;
    -webkit-mask-size: cover;
    width: 1em;
    height: 1em;
    mask-image:url('data:image/svg+xml;charset=utf-8,<svg width="24" height="24" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 20L18 20" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 4V16M12 16L15.5 12.5M12 16L8.5 12.5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    -webkit-mask-image:url('data:image/svg+xml;charset=utf-8,<svg width="24" height="24" stroke-width="1.5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 20L18 20" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 4V16M12 16L15.5 12.5M12 16L8.5 12.5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/></svg>');
}
.download_file_list a:hover { box-shadow: 2px 2px 4px #c0c0c7; }



/* Recording view */
#recording {
    max-width: 960px;
    margin: 0 auto 1rem auto;
}
#recording h1 { margin-bottom:0.25rem; }
#recording .series { font-weight:bold; margin-bottom:0.25rem; }
#recording .speaker_date {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 0.25rem;
    white-space: nowrap;
}
#recording .speaker { font-style:italic; }
#recording .date { float:right; color:#606067; font-size:0.9rem; margin-left: auto; }
#recording .poster { width:75%; margin:0.25rem auto 1rem auto; border:1px solid #c0c0c7; }

#recording a[download] { text-decoration:none; }

#player {
    background: #303030;
    width: 100%;
    margin-bottom:1rem;
}
#player audio {
    width: calc(100% - 2rem);
    margin: 1rem;
}
#player video {
    aspect-ratio: 16/9;
    width: 100%;
    /*background: url(/_img/play.png) center no-repeat;*/
    /*background-size: min(300px, 80%);*/
}
#player:has(video.not-playing)::before {
    /*/_img/transparent.png*/
    content: '';
    position: absolute;
    left:50%; top:50%;
    width:90px; height:90px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: rgba(0,0,0,.35);
    pointer-events: none;
}
#player:has(video.not-playing)::after {
    content: '';
    position: absolute;
    left:50%; top:50%;
    transform: translate(-35%, -50%);
    width:0px; height:0px;
    border-top: 18px solid transparent;
    border-bottom: 18px solid transparent;
    border-left: 30px solid rgba(255,255,255,.8);
    pointer-events: none;
}




/* Class View */
#members_only { float:right; font-size:0.9rem; }
#teacher_names { font-style:italic; }
#poster {
    float:right;
    max-width:calc(38.2% - 1rem);
    aspect-ratio: 16 / 9;
    margin:0 0 1rem 1rem;
    border:1px solid #c0c0c7;
}
@media screen and (max-width: 1023px) { #poster { float:none; width:100%; max-width:600px; margin:0 auto 1rem auto; } }



#session_list { clear:both; }
#session_list > h3 { margin-bottom:1rem; }


#session_list .session {
    background: #fff;
    border: 1px solid #ccc;
    border-top: none;
}
#session_list .session_header {
    padding: 0.75rem 1rem 1rem 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 2rem;
    cursor: pointer;
    background: linear-gradient(180deg, #eee, #f3f3f3, #ddd);
    border-top: 1px solid #ccc;
    transition: filter 0.15s;
}
#session_list .session_header:hover { filter:brightness(103%); }

#session_list .session .title { font-weight:bold; }
#session_list .session .teacher { font-style:italic; }
#session_list .session .date { font-size:0.9rem; color:#444; margin-left:auto; }
#session_list .session .session_content .player {
    padding: 0.5rem 1rem;
    width: calc(100% - 2rem);
    margin-bottom: 1rem;
    background: #333;
}
#session_list .session .session_content .player > video { width:100%; aspect-ratio:16 / 9; }
#session_list .session .session_content .player > audio { width:100%; }
#session_list .session .session_content .download_file_list { padding: 0 1rem; }