/* v21 responsive overrides for the "account-a" page group: scoped to its pages, loaded after every other stylesheet. */
/* Pages and their scope hooks: /dashboard (.uos-dash), /wallet (.uos-wallet), /home/my_courses (.uos-my-courses),
   /home/purchase_history (.uos-purchases), /messages (.uos-chat-page), /notifications (.uos-notif-page),
   /dashboard/settings (.uos-settings-page), /home/profile/user_profile (.uos-user-profile).
   Text inside components follows the component width: cards, stats, tiles and lists are size containers and their text,
   paddings and icons use clamp(min, Ncqi, max). The ceilings are the current desktop sizes, so 1200px and up looks the
   same as before; only narrow components shrink, never below 10px (body text 14px). Nothing is hidden or cut off. */

/* ---------- account pages with the profile menu (my courses, purchase history, user profile) ---------- */
.uos-acct-a .wish-list-search{container-type:inline-size;min-width:0}
.uos-acct-a .student-profile-info{min-width:0}
.uos-acct-a .student-profile-info .h4,.uos-acct-a .student-profile-info span{overflow-wrap:anywhere}
.uos-acct-a .student-profile-info .h4{font-size:clamp(1rem,8cqi,1.25rem)}
.uos-acct-a .btn-profile-menu{font-size:clamp(.8125rem,6cqi,.875rem);min-width:0}
.uos-acct-a .btn-profile-menu .badge{font-size:clamp(.625rem,4cqi,.75em)}
.uos-acct-a .bread-crumb h1,.uos-acct-a .bread-crumb .title{overflow-wrap:anywhere}
.uos-acct-a>.container>.row>[class*=col-]{min-width:0}
/* vertical rhythm: the 50px gaps above the menu and the content, and the 120px gap under the content, follow the screen
   width instead of staying desktop sized on phones (1200px and up keeps exactly 50px and 120px) */
.uos-acct-a .wish-list-search,.uos-acct-a .my-course-1-full-body,.uos-acct-a .purchase-body,.uos-user-profile .profile{margin-top:clamp(20px,4.2vw,50px)}
.uos-acct-a .my-course-1-full-body,.uos-acct-a .purchase-body,.uos-acct-a .profile-ful-body{margin-bottom:clamp(0px,20vw - 120px,120px)}

/* ---------- /dashboard ---------- */
.uos-dash .uos-hero,.uos-dash .uos-card,.uos-dash .uos-stat{container-type:inline-size}
.uos-dash .uos-hero>div{min-width:0}
.uos-dash .uos-avatar-lg{width:clamp(64px,24cqi,96px);height:clamp(64px,24cqi,96px)}
.uos-dash .uos-hero p{font-size:clamp(.875rem,1.6cqi,1rem);overflow-wrap:anywhere}
.uos-dash .uos-hero-actions .uos-btn{font-size:clamp(.8125rem,1.2cqi,.875rem)}
/* links that sit inside paragraphs (All levels, saved posts): a 24px tap area without changing the paragraph */
.uos-dash .uos-hero p a,.uos-dash .uos-card p a{display:inline-block;min-height:24px;line-height:24px}
/* quick access tiles: fluid text, padding and the one-column phone layout live in uos-dashboard.css (it loads after this sheet) */
/* stat cards */
.uos-dash .uos-stat>div{min-width:0}
.uos-dash .uos-stat strong{font-size:clamp(1.125rem,10.5cqi,1.5rem);overflow-wrap:anywhere}
.uos-dash .uos-stat span,.uos-dash .uos-stat .uos-stat-link{font-size:clamp(.6875rem,5.2cqi,.75rem)}
.uos-dash .uos-stat .uos-stat-icon{font-size:19px}
.uos-dash .uos-stat-link{display:inline-flex;align-items:center;min-height:24px}
/* card headings and lists */
.uos-dash .uos-card-head{min-width:0}
.uos-dash .uos-card-head h2{font-size:clamp(.9375rem,3cqi,1.0625rem);min-width:0;overflow-wrap:anywhere}
.uos-dash .uos-card-head a{display:inline-flex;align-items:center;min-height:24px;font-size:clamp(.75rem,5cqi,.8125rem)}
.uos-dash .uos-dash-h3{font-size:clamp(.9375rem,5.8cqi,1rem);overflow-wrap:anywhere}
.uos-dash .uos-dash-h3-sm{font-size:clamp(.8125rem,2cqi,.875rem)}
.uos-dash .uos-list>li{min-width:0}
.uos-dash .uos-list-main strong{white-space:normal;overflow-wrap:anywhere;font-size:clamp(.8125rem,6cqi,.875rem)}
.uos-dash .uos-list-main small{font-size:clamp(.6875rem,5cqi,.75rem)}
.uos-dash .uos-list-main>a{display:flex;flex-direction:column;justify-content:center;min-height:24px}
.uos-dash .uos-card .uos-btn{font-size:clamp(.8125rem,6cqi,.875rem)}
.uos-dash .uos-card .uos-btn-sm{font-size:clamp(.75rem,5.5cqi,.8125rem)}
.uos-dash .uos-card p.uos-muted{overflow-wrap:anywhere}
.uos-dash .uos-badge-tile{font-size:clamp(.65625rem,4.4cqi,.75rem)}
.uos-dash .uos-dash-cert-info .uos-list-main strong{font-size:clamp(.8125rem,6cqi,.875rem)}
.uos-dash .uos-empty p{overflow-wrap:anywhere}

/* ---------- /wallet (component sizes live in the page's own style block) ---------- */
.uos-wallet .container>header h1{overflow-wrap:anywhere}
.uos-wallet .wl-note a{display:inline-block;min-height:24px;line-height:24px}
.uos-wallet .wl-act li{flex-wrap:wrap}
.uos-wallet .wl-act li>span:first-child{flex:1 1 200px;min-width:0;overflow-wrap:anywhere}
.uos-wallet .wl-gifts li{max-width:100%;min-width:0}
.uos-wallet .wl-gifts li span{overflow-wrap:anywhere;min-width:0}
.uos-wallet .uos-card .uos-btn{font-size:clamp(.8125rem,3cqi,.875rem)}
.uos-wallet .uos-form .uos-field>select,.uos-wallet .uos-form .uos-field>input{max-width:100%;min-width:0}
.uos-wallet .uos-form label{overflow-wrap:anywhere}

/* ---------- /home/my_courses ---------- */
.uos-my-courses .my-course-1-full-body{container-type:inline-size;min-width:0}
.uos-my-courses .my-course-1-full-body .uos-inner-title{font-size:clamp(1.25rem,2.6cqi,1.5rem)}
.uos-my-courses .my-course-1-full-body .my-course-1-full-body-card{min-width:0}
.uos-my-courses .my-course-1-full-body .my-course-1-full-body-card .my-course-1-img{flex:0 0 auto}
.uos-my-courses .my-course-1-full-body .my-course-1-full-body-card .my-course-1-img img{width:clamp(180px,31cqi,245px);height:auto;aspect-ratio:245/143}
.uos-my-courses .my-course-1-full-body .my-course-1-full-body-card .my-course-1-text{min-width:0}
.uos-my-courses .my-course-1-text-heading{gap:8px;align-items:flex-start}
.uos-my-courses .my-course-1-text-heading h3{font-size:clamp(.875rem,1.7cqi,.9375rem);min-width:0;overflow-wrap:anywhere;margin:0}
.uos-my-courses .my-course-1-text-heading .child-icon{flex:0 0 auto}
.uos-my-courses .my-course-1-lesson-text{flex-wrap:wrap}
.uos-my-courses .my-course-1-lesson-text .icon-1{margin-right:clamp(12px,3cqi,30px)}
.uos-my-courses .my-course-1-lesson-text .icon-1 p{font-size:clamp(.6875rem,1.4cqi,.75rem);margin-bottom:0}
.uos-my-courses .my-course-1-skill p{font-size:clamp(.6875rem,1.4cqi,.75rem)}
.uos-my-courses .my-course-1-last .icon-img{min-width:0}
.uos-my-courses .my-course-1-last .icon-img a{display:inline-flex;align-items:center;min-height:24px}
.uos-my-courses .my-course-1-last .icon-img .text-nowrap{white-space:normal!important;overflow-wrap:anywhere}
.uos-my-courses .my-course-1-last .my-course-1-btn{min-width:0}
.uos-my-courses .my-course-1-last .my-course-1-btn .btn{display:flex;align-items:center;justify-content:center;gap:.35em}
.uos-my-courses .uos-empty-block .uh-empty strong{font-size:clamp(.875rem,1.6cqi,.9rem)}
.uos-my-courses .my-course-1-full-body:has(.dropdown-menu.show){position:relative;z-index:40}
/* narrow list (phones, and the tablet two-column layout): picture above the text, full width */
@container (max-width:600px){
    .uos-my-courses .my-course-1-full-body .my-course-1-full-body-card{display:block}
    .uos-my-courses .my-course-1-full-body .my-course-1-full-body-card .my-course-1-img img{width:100%;max-height:240px;aspect-ratio:16/9}
    .uos-my-courses .my-course-1-full-body .my-course-1-full-body-card .my-course-1-text{margin-left:0;margin-top:16px}
    .uos-my-courses .my-course-1-last .my-course-1-btn{margin-right:0!important;padding-top:12px!important}
    /* the space between courses is a row gap, so no empty band is left under the last course (one or two per row) */
    .uos-my-courses .my-course-1-full-body>.row{row-gap:clamp(24px,8cqi,48px)}
    .uos-my-courses .my-course-1-full-body>.row>[class*=col-]{margin-bottom:0!important}
}

/* ---------- /home/purchase_history ---------- */
.uos-purchases .purchase-body{container-type:inline-size;white-space:normal;min-width:0}
.uos-purchases .purchase-body .table thead th{white-space:nowrap}
.uos-purchases .purchase-body .uos-table-empty{white-space:normal}
.uos-purchases .purchase-body .uos-table-empty span{display:block;margin-top:2px}
.uos-purchases .purchase-body .purchase-2-img{align-items:center;min-width:0}
.uos-purchases .purchase-body .purchase-2-img img{flex:0 0 auto}
.uos-purchases .purchase-body .purchase-2-img a{min-width:0;overflow-wrap:anywhere}
.uos-purchases .purchase-body .table th,.uos-purchases .purchase-body .table td{width:auto}
.uos-purchases .purchase-body .table td{white-space:nowrap}
.uos-purchases .purchase-body .uos-table-empty a{display:inline-block;min-height:24px;line-height:24px}
.uos-purchases .purchase-body .table thead th{font-size:clamp(.75rem,1.5cqi,.8125rem)}
.uos-purchases .purchase-body .pagenation-items{flex-wrap:wrap;gap:6px 0}
.uos-purchases .uos-card .uos-card-head h2{font-size:clamp(1rem,2.2cqi,1.125rem)}
/* narrow list: one block per purchase with the column name in front of each value */
@container (max-width:599px){
    .uos-purchases .purchase-body .table thead{display:none}
    .uos-purchases .purchase-body .table,.uos-purchases .purchase-body .table tbody,.uos-purchases .purchase-body .table tr,.uos-purchases .purchase-body .table th,.uos-purchases .purchase-body .table td{display:block;width:auto}
    .uos-purchases .purchase-body .table tbody tr{padding:12px 0 14px;border-bottom:1px solid var(--uos-line)}
    .uos-purchases .purchase-body .table tbody tr:last-child{border-bottom:0}
    .uos-purchases .purchase-body .table th[scope=row]{padding:0 0 6px;border:0}
    .uos-purchases .purchase-body .table th[scope=row] .purchase-2-img{margin:0}
    .uos-purchases .purchase-body .table td{padding:3px 0;border:0;text-align:left!important;font-size:.875rem;white-space:normal}
    .uos-purchases .purchase-body .table td[data-label]::before{content:attr(data-label) ": ";color:var(--uos-muted);font-weight:600}
    .uos-purchases .purchase-body .table td.purchase-invoice-cell{padding-top:10px}
    .uos-purchases .purchase-body .table td.purchase-invoice-cell .btn{display:inline-flex;align-items:center}
    .uos-purchases .purchase-body .uos-table-empty{display:block;padding:20px 0!important;border:0}
}

/* ---------- /messages ---------- */
.uos-chat-page .uos-chat{min-width:0}
.uos-chat-page .uos-chat-list,.uos-chat-page .uos-chat-pane{container-type:inline-size;min-width:0}
.uos-chat-page .uos-chat-list-head{min-width:0;gap:8px}
.uos-chat-page .uos-chat-list-head h1{font-size:clamp(1.125rem,6.4cqi,1.3125rem);min-width:0}
.uos-chat-page .uos-chat-search input{min-width:0}
.uos-chat-page .uos-thread-top strong{font-size:clamp(.8125rem,4.5cqi,.875rem)}
.uos-chat-page .uos-thread-preview{font-size:clamp(.75rem,4cqi,.8125rem)}
.uos-chat-page .uos-chat-empty-list p,.uos-chat-page .uos-chat-empty-list small{overflow-wrap:anywhere}
.uos-chat-page .uos-chat-placeholder{max-width:100%;min-width:0}
.uos-chat-page .uos-chat-placeholder h2{font-size:clamp(1.125rem,2.2cqi,1.3125rem)}
.uos-chat-page .uos-chat-placeholder p{font-size:clamp(.875rem,1.6cqi,1rem)}
.uos-chat-page .uos-chat-placeholder .uos-btn{font-size:clamp(.8125rem,1.5cqi,.875rem);max-width:100%;white-space:normal}
.uos-chat-page .uos-chat-pane-head{min-width:0}
.uos-chat-page .uos-chat-pane-head img{flex:0 0 auto}
.uos-chat-page .uos-chat-pane-title{min-width:0}
.uos-chat-page .uos-chat-pane-title>a{display:inline-flex;align-items:center;min-height:24px;max-width:100%}
.uos-chat-page .uos-chat-pane-title strong{font-size:clamp(.875rem,1.6cqi,.9375rem);overflow-wrap:anywhere}
.uos-chat-page .uos-chat-pane-title>span{font-size:clamp(.6875rem,1.3cqi,.75rem)}
.uos-chat-page .uos-chat-hint{white-space:normal;max-width:100%;text-align:center}
.uos-chat-page .uos-chat-blocked{overflow-wrap:anywhere}
.uos-chat-page .uos-compose-help{overflow-wrap:anywhere}
.uos-chat-page .uos-chat-messages{padding:clamp(12px,2.2cqi,22px)}
@media (max-width:991px){
    .uos-chat-page .uos-thread-preview{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow-wrap:anywhere}
    .uos-chat-page .uos-chat-back{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;margin:-6px 0 -6px -12px;padding:0;border-radius:12px;flex:0 0 auto}
}

/* ---------- /notifications ---------- */
.uos-notif-page .uos-card{container-type:inline-size}
.uos-notif-page .uos-card-head{min-width:0}
.uos-notif-page .uos-notif-title{font-size:clamp(1.125rem,2.8cqi,1.375rem);line-height:1.3;min-width:0;overflow-wrap:anywhere}
.uos-notif-page .uos-notif-row{flex-wrap:wrap;min-width:0}
.uos-notif-page .uos-notif-row>.uos-list-main{flex:1 1 0;min-width:0}
.uos-notif-page .uos-list-main strong{font-size:clamp(.8125rem,4.5cqi,.875rem);overflow-wrap:anywhere}
.uos-notif-page .uos-list-main small{font-size:clamp(.6875rem,3.8cqi,.75rem);overflow-wrap:anywhere}
.uos-notif-page .uos-notif-row>small.uos-muted{font-size:clamp(.6875rem,3.8cqi,.75rem)}
.uos-notif-page .uos-btn-sm{font-size:clamp(.75rem,4cqi,.8125rem)}
.uos-notif-page .uos-empty p{overflow-wrap:anywhere}
/* narrow card: the time goes under the text, aligned with it, instead of squeezing the text column */
@container (max-width:420px){
    .uos-notif-page .uos-notif-row>.uos-list-main{flex-basis:calc(100% - 50px)}
    .uos-notif-page .uos-notif-row>small.uos-muted{flex-basis:100%;padding-left:50px;margin-top:-6px}
}

/* ---------- /dashboard/settings ---------- */
.uos-settings-page .uos-card{container-type:inline-size}
/* phones make the back link an inline-flex tap target (uos-theme.css), which drops the space between the arrow and the
   word; the gap puts it back (no effect on desktop, where the link is inline) */
.uos-settings-page a.uos-link{gap:.4em}
.uos-settings-page .uos-card-head{min-width:0}
.uos-settings-page .uos-settings-title{font-size:clamp(1.125rem,2.8cqi,1.375rem);line-height:1.3;min-width:0;overflow-wrap:anywhere}
.uos-settings-page .uos-settings-h2{font-size:clamp(1rem,2.4cqi,1.125rem)}
.uos-settings-page .uos-legend{font-size:clamp(.9375rem,2.1cqi,1rem)}
.uos-settings-page .uos-check{font-size:clamp(.8125rem,1.8cqi,.875rem);min-width:0}
.uos-settings-page .uos-check>input+*{min-width:0}
.uos-settings-page .uos-data-title{font-size:clamp(.875rem,2cqi,.9375rem)}
.uos-settings-page .uos-form label{overflow-wrap:anywhere}
.uos-settings-page .uos-btn{font-size:clamp(.8125rem,1.8cqi,.875rem);max-width:100%;white-space:normal}
.uos-settings-page .uos-btn-sm{font-size:clamp(.75rem,1.7cqi,.8125rem)}
.uos-settings-page .uos-grid-2>.uos-check{min-width:0}
.uos-settings-page.uos-page>.container>section.uos-card:last-child{padding-bottom:var(--uos-card-pad)!important}
@media (max-width:767px),(pointer:coarse){
    .uos-settings-page .uos-check input[type=checkbox]{width:24px;height:24px;margin-top:0}
}

/* ---------- /home/profile/user_profile ---------- */
.uos-user-profile .uprof,.uos-user-profile .profile-ful-body{container-type:inline-size;min-width:0}
.uos-user-profile .uprof-name{font-size:clamp(1.125rem,2.3cqi,1.375rem);overflow-wrap:anywhere}
.uos-user-profile .uprof-text p{font-size:clamp(.8125rem,1.5cqi,.875rem)}
.uos-user-profile .uprof-btn{font-size:clamp(.8125rem,1.5cqi,.875rem)}
.uos-user-profile .uprof-tools{min-width:0;max-width:100%}
/* the 120px minimum height plus the 3:1 ratio made the cover 360px wide in a 296px card at 320px, cutting off its buttons */
.uos-user-profile .uprof-cover{width:100%;min-width:0}
.uos-user-profile .profile-ful-body{padding-left:clamp(14px,2.42vw,29px);padding-right:clamp(14px,2.42vw,29px)}
.uos-user-profile .profile-input-section .h4{font-size:clamp(1.125rem,2.6cqi,1.25rem)}
.uos-user-profile .profile-input-section label{font-size:clamp(.875rem,1.8cqi,1rem);overflow-wrap:anywhere}
.uos-user-profile .profile-input-section .input-group{flex-wrap:nowrap;min-width:0}
.uos-user-profile .profile-input-section .input-group .form-control{min-width:0}
.uos-user-profile .profile-input-section .btn{max-width:100%;white-space:normal}
@container (max-width:479px){
    .uos-user-profile .profile-input-section hr{margin:1.5rem 0!important}
    .uos-user-profile .profile-input-section .btn.px-5{padding-left:1.5rem!important;padding-right:1.5rem!important}
}