@import url("./legacy-app.css");
@import url("./ui-system.css");
@import url("./ui-navigation.css");
@import url("./ui-layout.css");
@import url("./ui-responsive.css");
@import url("./pjax-cube-transition.css");
@import url("./utilities/code_editor.css");

.programming-rank-badge{display:inline-flex;padding:.1rem .42rem;border:1px solid color-mix(in srgb,currentColor 28%,transparent);border-radius:999px;font-size:.7rem;font-weight:700;vertical-align:middle;opacity:.9}

.course-payment-box{display:grid;gap:.65rem;min-width:min(100%,20rem)}
.course-payment-price{font-size:1.35rem;font-variant-numeric:tabular-nums;color:var(--accent)}
.course-payment-actions{display:flex;flex-wrap:wrap;gap:.55rem}
.course-payment-actions form{margin:0}
.course-payment-unavailable{display:block;max-width:24rem;line-height:1.35}
.content-page-clean .rendered-content,
.course-description-public.rendered-content,
.course-intro-card .rendered-content,
.step-body.rendered-content,
.step-media-text.rendered-content{font-size:calc(1.08rem * var(--content-font-scale,1));line-height:1.78}
.online-presence-menu{position:relative;display:inline-block}
.online-presence-menu > summary{list-style:none}
.online-presence-menu > summary::-webkit-details-marker{display:none}
.online-presence-menu .online-indicator{cursor:pointer}
.online-presence-menu[open] .online-indicator{border-color:var(--accent);color:var(--accent);background:var(--accent-subtle)}
.online-presence-panel{position:absolute;right:0;top:calc(100% + 10px);z-index:3200;display:grid;gap:.35rem;width:min(320px,calc(100vw - 24px));padding:.8rem;border:1px solid var(--line);border-radius:14px;background:var(--panel);box-shadow:0 18px 44px rgba(0,0,0,.32)}
.online-presence-panel > strong{padding:.15rem .25rem .45rem;color:var(--text);font-size:.9rem}
.online-presence-panel a,
.online-presence-guests,
.online-presence-empty{display:grid;gap:.16rem;padding:.55rem .65rem;border-radius:10px;color:var(--text);text-decoration:none}
.online-presence-panel a:hover{background:var(--surface-soft);text-decoration:none}
.online-presence-panel small,
.online-presence-empty{color:var(--muted);font-size:.78rem;line-height:1.3}
.online-presence-guests{border-top:1px solid var(--line);border-radius:0;color:var(--muted)}
.course-landing-program{height:auto;align-self:start}
.course-landing-program .course-program-list{gap:.9rem}
.course-landing-program .course-program-list:first-child{display:flex;align-items:center;gap:.65rem;margin-bottom:1rem}
.course-landing-program .course-program-list:first-child::before{display:none}
.course-landing-program .course-program-list:first-child h2{margin:0}
.course-landing-program .course-preview-topic{align-items:flex-start;padding:.25rem 0}
.course-landing-program .course-preview-topic strong{display:-webkit-box;overflow:hidden;white-space:normal;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.course-landing-program .course-preview-topic small{display:block;margin-top:.18rem}
.payment-status-card{max-width:46rem;margin:2rem auto;padding:clamp(1.1rem,3vw,2rem)}
.payment-test-banner{margin:0 0 1rem;padding:.7rem 1rem;border:1px solid #e2aa3b;border-radius:.75rem;background:color-mix(in srgb,#e2aa3b 14%,transparent);color:inherit;font-weight:700}
.site-mode-staff-indicator{display:inline-flex;align-items:center;min-height:2.1rem;padding:0 .75rem;border:1px solid #e2aa3b;border-radius:999px;background:color-mix(in srgb,#e2aa3b 16%,transparent);color:#ffd479;font-size:.78rem;font-weight:800;letter-spacing:0}
.site-mode-banner{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.45rem .8rem;padding:.7rem var(--site-container-padding,18px);border-bottom:1px solid color-mix(in srgb,var(--accent) 40%,transparent);background:color-mix(in srgb,var(--panel) 88%,var(--accent) 12%);color:var(--text);text-align:center}
.site-mode-banner strong{color:var(--accent)}
.site-mode-countdown{font-variant-numeric:tabular-nums;color:var(--muted);font-weight:700}
@media(max-width:680px){.course-payment-actions,.course-payment-actions form,.course-payment-actions .button{width:100%}.course-landing-cta{align-items:stretch}.course-payment-box{min-width:0}}
@media(max-width:860px){.online-presence-menu{width:100%}.online-presence-menu .online-indicator{width:100%;justify-content:flex-start}.online-presence-panel{position:static;width:100%;margin-top:.45rem;box-shadow:none}.site-mode-staff-indicator{width:100%;justify-content:center}}