/* v21 responsive overrides for the "account-b" page group: scoped to its pages, loaded after every other stylesheet.
   Pages: /u/N (main.uos-acctb-profile), /affiliate, /calendar, /library, /welcome, /support, /notices (main.uos-page.uos-acctb)
   and /home/my_wishlist (section.uos-acctb-wishlist). Nothing here matches outside those wrappers.

   Owner's rule: text, padding and icons inside a component follow the component's own width. Components are
   inline-size containers and their text uses clamp(min, Ncqi, desktop size). N is chosen so the desktop size is reached
   at the narrowest width the component has on a 1200px+ screen (aside cards: 276px content box, stat tiles: 231px,
   library feature tiles: 314px, calendar day cells: 92px), so desktop renders exactly as before and the text only
   starts to shrink, smoothly, when the component gets narrower than that. Page-level text uses rem + vw. */

/* ------------------------------------------------ containers ------------------------------------------------ */
.uos-acctb .uos-hero,.uos-acctb .uos-card,.uos-acctb .uos-stat,.uos-acctb .uos-feature,.uos-acctb .uos-chip-row,
.uos-acctb .uos-option,.uos-acctb .nb-item,.uos-acctb .cal-day,.uos-acctb .cal-agenda>li,.uos-acctb .uos-empty-block{container-type:inline-size}

/* ------------------------------------------------ shared components ------------------------------------------ */
/* card headings (17px desktop) and the smaller aside headings (16px desktop, previously inline styles) */
.uos-acctb .uos-card-head h2,.uos-acctb .uos-card-head h3,.uos-acctb .uos-card>h2,.uos-acctb .uos-q legend,.uos-acctb .uos-q-label{font-size:clamp(15px,min(6.2cqi,14px + .25vw),17px)}
.uos-acctb .uos-card .pf-h3,.uos-acctb .uos-card .sp-h3,.uos-acctb .uos-card .nb-h3{font-size:clamp(14px,min(5.8cqi,13px + .25vw),16px)}
.uos-acctb .uos-card-head a{font-size:clamp(12px,4.8cqi,13px)}
/* buttons and chips: 14px / 13px on desktop */
.uos-acctb .uos-btn{font-size:clamp(13px,5.1cqi,14px);padding:clamp(8px,3.7cqi,10px) clamp(14px,6.6cqi,18px)}
.uos-acctb .uos-btn-sm{font-size:clamp(12px,4.8cqi,13px);padding:clamp(6px,2.6cqi,7px) clamp(11px,4.8cqi,13px)}
.uos-acctb .uos-chip{font-size:clamp(12px,4.8cqi,13px);padding:clamp(6px,2.6cqi,7px) clamp(11px,5.1cqi,14px)}
.uos-acctb .uos-badge{font-size:clamp(11px,4.4cqi,12px)}
.uos-acctb .uos-skill{font-size:clamp(11px,4.4cqi,12px)}
/* lists: titles wrap instead of being cut with an ellipsis; the block links are at least 24px tall to tap */
.uos-acctb .uos-list>li{gap:clamp(10px,4.4cqi,12px)}
.uos-acctb .uos-list-icon{width:clamp(32px,13.8cqi,38px);height:clamp(32px,13.8cqi,38px)}
.uos-acctb .uos-list-main strong{font-size:clamp(13px,5.1cqi,14px);white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
.uos-acctb .uos-list-main small{font-size:clamp(11px,4.4cqi,12px)}
.uos-acctb .uos-list-main>a{padding:3px 0;margin:-3px 0}
.uos-acctb .uos-kv{font-size:clamp(13px,5.1cqi,14px)}
.uos-acctb .uos-empty h3,.uos-acctb .uos-empty .uos-empty-title{font-size:clamp(15px,min(6.2cqi,14px + .25vw),17px)}
.uos-acctb .uos-empty i{width:clamp(52px,22.5cqi,62px);height:clamp(52px,22.5cqi,62px);font-size:clamp(22px,9.5cqi,26px)}
.uos-acctb .uos-empty p{overflow-wrap:anywhere}
/* option tiles (welcome): 14px label, 12px 14px padding at the 190px minimum tile width */
.uos-acctb .uos-option span{font-size:clamp(13px,7.4cqi,14px);padding:clamp(10px,6.3cqi,12px) clamp(12px,7.4cqi,14px)}
/* stat tiles (affiliate totals): 24px number, 48px icon at the 231px desktop tile; two tiles per row stay on phones */
.uos-acctb .uos-stat strong{font-size:clamp(18px,10.4cqi,24px)}
.uos-acctb .uos-stat span{font-size:clamp(11px,5.2cqi,12px)}
.uos-acctb .uos-stat-icon{width:clamp(36px,20.8cqi,48px);height:clamp(36px,20.8cqi,48px);font-size:clamp(15px,8.3cqi,19px);border-radius:clamp(11px,6.5cqi,15px)}
@media (max-width:640px){.uos-acctb .aff-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.uos-acctb .aff-stats .uos-stat{padding:12px;gap:10px}}
/* feature tiles (library files): 16px title, 50px icon at the 314px desktop tile */
.uos-acctb .uos-feature-icon{width:clamp(40px,16cqi,50px);height:clamp(40px,16cqi,50px);font-size:clamp(17px,6.7cqi,21px)}
.uos-acctb .lib-title{margin:0 0 2px;font-size:clamp(14px,5.1cqi,16px);overflow-wrap:anywhere}
.uos-acctb .lib-desc{margin:0;font-size:clamp(13px,4.5cqi,14px)}
.uos-acctb .lib-count{font-size:clamp(13px,5.1cqi,14px);font-weight:600}

/* ------------------------------------------------ profile /u/N ----------------------------------------------- */
.uos-acctb-profile .pf-name{font-size:clamp(1.375rem,1rem + 1.6vw,1.75rem);margin:0 0 4px;overflow-wrap:anywhere}
.uos-acctb-profile .pf-meta{font-size:clamp(12px,4.8cqi,13px)}
.uos-acctb-profile .uos-profile-head{gap:clamp(14px,2.4cqi,22px)}
.uos-acctb-profile .uos-profile-head>div{min-width:0}
/* the level badge carries a long title: it may wrap instead of overflowing its pill */
.uos-acctb-profile .uos-profile-head .uos-badge{white-space:normal;max-width:100%;text-align:left}
.uos-acctb a.uos-badge{min-height:24px}
.uos-acctb-profile .uos-badge-tile{font-size:clamp(11px,4.4cqi,12px)}

/* ------------------------------------------------ affiliate -------------------------------------------------- */
.uos-acctb-affiliate .aff-link-row .uos-input{font-size:clamp(12px,4.8cqi,13px)}
.uos-acctb-affiliate .aff-bars-labels{font-size:clamp(10px,4cqi,11px)}
/* the agreement checkbox is a tap target: 24px on touch widths, 20px with a mouse */
.uos-acctb-affiliate .uos-check input[type=checkbox]{width:24px;height:24px;margin-top:0}
@media (min-width:992px){.uos-acctb-affiliate .uos-check input[type=checkbox]{width:20px;height:20px;margin-top:1px}}

/* ------------------------------------------------ calendar --------------------------------------------------- */
.uos-acctb-calendar .cal-bar h2{font-size:clamp(18px,6.6cqi,22px)}
.uos-acctb-calendar .cal-legend{font-size:clamp(12px,4.8cqi,13px)}
/* month grid: an item's title wraps inside its day cell instead of being cut with an ellipsis; its text follows the cell */
.uos-acctb-calendar .cal-item{white-space:normal;font-size:clamp(11px,13cqi,12px)}
.uos-acctb-calendar .cal-item-title{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
.uos-acctb-calendar .cal-more{font-size:clamp(11px,13cqi,12px)}
/* agenda rows (phone list and the "Next 14 days" aside): 16px title, 13px time column at the 276px aside */
.uos-acctb-calendar .cal-agenda a{font-size:clamp(14px,5.8cqi,16px)}
.uos-acctb-calendar .cal-agenda a>span:last-child{min-width:0;overflow-wrap:anywhere}
.uos-acctb-calendar .cal-agenda .cal-when{font-size:clamp(12px,4.7cqi,13px);flex-basis:clamp(60px,26.1cqi,72px)}
.uos-acctb-calendar .cal-agenda-day{font-size:clamp(12px,4.7cqi,13px)}
.uos-acctb-calendar .cal-feed input{font-size:clamp(11px,4.4cqi,12px)}

/* ------------------------------------------------ notices ---------------------------------------------------- */
.uos-acctb-notices .nb-item{gap:clamp(10px,4.2cqi,14px)}
.uos-acctb-notices .nb-item h3{font-size:clamp(14px,4.8cqi,16px);overflow-wrap:anywhere}
.uos-acctb-notices .nb-meta{font-size:clamp(11px,3.6cqi,12px)}
.uos-acctb-notices .nb-excerpt{font-size:clamp(13px,4.2cqi,14px)}

/* ------------------------------------------------ support ---------------------------------------------------- */
.uos-acctb-support .sp-tips{font-size:clamp(13px,5.1cqi,14px)}
.uos-acctb-support .uos-list>li>.uos-badge{margin-top:2px}

/* ------------------------------------------------ wishlist --------------------------------------------------- */
.uos-acctb-wishlist .uh-empty strong{font-size:clamp(13px,4.4cqi,14.4px)}
.uos-acctb-wishlist .uh-empty small{font-size:clamp(12px,3.9cqi,12.8px)}

/* ------------------------------------------------ bundle orders, shop orders, tutor sessions ----------------- */
/* order tables: a normal table from 640px up; on phones each order becomes a stacked block of "label: value" rows
   (labels come from data-label, the header row stays in the markup for screen readers), so nothing has to scroll */
.uos-acctb-shoporders .so-h1{font-size:clamp(1.125rem,.95rem + .9vw,1.375rem)}
.uos-acctb-shoporders .so-note{font-size:clamp(12px,3.2cqi,13px)}
.uos-acctb .uos-acctb-stack td{overflow-wrap:anywhere}
@media (max-width:639.98px){
  .uos-acctb .uos-table-wrap:has(.uos-acctb-stack){overflow:visible}
  .uos-acctb .uos-acctb-stack,.uos-acctb .uos-acctb-stack tbody,.uos-acctb .uos-acctb-stack tr,.uos-acctb .uos-acctb-stack td{display:block;width:100%}
  .uos-acctb .uos-acctb-stack thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .uos-acctb .uos-acctb-stack thead th{position:absolute;padding:0;border:0}
  /* links inside a stacked cell (bundle title, resource title, Renew) are full 24px tap targets */
  .uos-acctb .uos-acctb-stack td>a:not(.uos-btn){display:inline-flex;align-items:center;min-height:24px}
  .uos-acctb .uos-acctb-stack tr{container-type:inline-size;border:1px solid var(--uos-border);border-radius:var(--uos-radius);padding:clamp(8px,3.5cqi,12px) clamp(10px,4cqi,14px);margin-bottom:10px}
  .uos-acctb .uos-acctb-stack tr:last-child{margin-bottom:0}
  .uos-acctb .uos-acctb-stack td{display:flex;gap:12px;justify-content:space-between;align-items:baseline;text-align:right;border:0;padding:clamp(5px,2cqi,7px) 0;font-size:clamp(13px,4.4cqi,14px)}
  .uos-acctb .uos-acctb-stack td+td{border-top:1px dashed var(--uos-border)}
  .uos-acctb .uos-acctb-stack td::before{content:attr(data-label);flex:0 0 auto;text-align:left;font-size:clamp(11px,3.6cqi,12px);font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--uos-muted)}
  .uos-acctb .uos-acctb-stack td>*{min-width:0}
  .uos-acctb .uos-acctb-stack td.uos-acctb-act{justify-content:flex-start}
  .uos-acctb .uos-acctb-stack td.uos-acctb-act:empty{display:none}
  .uos-acctb .uos-acctb-stack td.uos-acctb-act::before{content:none}
}
/* tutor sessions: booking cards follow their own width */
.uos-acctb-tutors .tb-booking{container-type:inline-size}
.uos-acctb-tutors .tb-booking h3{font-size:clamp(14px,4.4cqi,16px);overflow-wrap:anywhere}
.uos-acctb-tutors .tb-booking-top>div:first-child{min-width:0}
.uos-acctb-tutors .tb-booking .uos-muted{overflow-wrap:anywhere}
.uos-acctb-tutors .tb-inline-form{flex-wrap:wrap}
.uos-acctb-tutors .tb-inline-form .uos-input{min-width:0;flex:1 1 200px}
.uos-acctb-tutors details>summary{min-height:24px;display:inline-flex;align-items:center;cursor:pointer}

/* ------------------------------------------------ last card keeps its bottom padding -------------------------- */
/* uos-theme.css zeroes padding-bottom on "main > .container > section:last-child" (meant for bare page sections);
   on these pages that last section is a card, so its content (order rows, history) sat on the card's bottom edge. */
[data-uos-page] main.uos-acctb>.container>section.uos-card:last-child{padding-bottom:var(--uos-card-pad,clamp(16px,.6rem + 1.2vw,22px))!important}
/* ------------------------------------------------ welcome questions (/welcome, focused page) ----------------- */
.uos-acctb-welcome .wl-wrap{max-width:760px}
body.uos-focus-page .uos-acctb-welcome{padding-top:clamp(8px,3vh,32px);padding-bottom:clamp(16px,4vh,40px)}
.uos-acctb-welcome .uos-hero p{font-size:clamp(.9375rem,.9rem + .2vw,1rem)}
.uos-acctb-welcome .wl-form .uos-option-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,190px),1fr))}
.uos-acctb-welcome .wl-grid-3{grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr))!important}
.uos-acctb-welcome .wl-option span{flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;height:100%}
.uos-acctb-welcome .wl-option strong{font-weight:700;overflow-wrap:anywhere}
.uos-acctb-welcome .wl-option small{font-weight:500;line-height:1.35;color:var(--uos-muted);font-size:clamp(12px,6.8cqi,13px)}
.uos-acctb-welcome .wl-more{border:1px solid var(--uos-line-2);border-radius:var(--uos-radius);margin:0 0 22px;background:var(--uos-surface)}
.uos-acctb-welcome .wl-more>summary{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:clamp(44px,6cqi,48px);padding:clamp(8px,1.4cqi,10px) clamp(12px,2.4cqi,16px);cursor:pointer;list-style:none;font-weight:600;color:var(--uos-ink)}
/* question titles and the topics summary: 17px in the 690px desktop card, down to 15px in a phone card */
.uos-acctb-welcome .uos-q legend,.uos-acctb-welcome .wl-more>summary{font-size:clamp(15px,1.5cqi + .42rem,17px)}
.uos-acctb-welcome .wl-form .uos-option{display:flex}
.uos-acctb-welcome .wl-form .uos-option span{flex:1 1 auto}
.uos-acctb-welcome .wl-more>summary::-webkit-details-marker{display:none}
.uos-acctb-welcome .wl-more>summary i{flex:0 0 auto;font-size:.8em;color:var(--uos-muted);transition:transform .15s}
.uos-acctb-welcome .wl-more[open]>summary i{transform:rotate(180deg)}
.uos-acctb-welcome .wl-more>summary:focus-visible{outline:2px solid var(--uos-accent-text);outline-offset:2px;border-radius:var(--uos-radius)}
.uos-acctb-welcome .wl-more .uos-q{padding:0 clamp(12px,3cqi,16px) clamp(12px,3cqi,16px);margin:0}
.uos-acctb-welcome .wl-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.uos-acctb-welcome .wl-actions .uos-btn{justify-content:center}
@container (max-width:440px){.uos-acctb-welcome .wl-actions .uos-btn{flex:1 1 100%}.uos-acctb-welcome .wl-actions .uos-btn-primary{order:-1}}
@container (max-width:480px){.uos-acctb-welcome .wl-form .uos-option-grid:not(.wl-grid-3){grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}}
@media (prefers-reduced-motion:reduce){.uos-acctb-welcome .wl-more>summary i{transition:none}}