/* v21 responsive overrides for the "practice" page group: scoped to its pages, loaded after every other stylesheet. */
/* Pages: /lab (.lh), /lab/practice/<slug> (.sbw), /lab/task (.lab-task), /lab/project (.lab-project), /lab/finding (.lab-finding),
   the old /lab/practice catalogue (.sbx-catalog), /practice (.uhub with the Virtual Lab or SEO CTF card) and /free-seo-resources (.uhub with .rs-toc).
   Rule: text inside a component scales with the component (container-type:inline-size on the component, clamp(min, rem + Ncqi, max));
   every max is the size desktop had before, so 1200px+ looks the same. Page-level text uses clamp(min, rem + vw, max). */

/* ---------- 1. Lab pages (hub, reviewed task, AI project, finding): components become query containers ---------- */
/* (only block-level, full-width boxes: a shrink-to-fit element such as a chip row or a button must never be a container, inline-size containment would collapse it) */
:is(.lh,.lab-task,.lab-project,.lab-finding) :is(.uos-hero,.uos-card,.uos-stat,.uos-feature,.uos-coverage-item,.uos-env,.uos-list,.uos-finding-row){container-type:inline-size}
/* headings and small text that used to be fixed px (16px h3, 17px card heads, 13px notes) */
:is(.lh,.lab-task,.lab-project,.lab-finding) .uos-card-head :is(h2,h3),:is(.lh,.lab-task,.lab-project,.lab-finding) .lab-h2{font-size:clamp(.95rem,.6875rem + 2cqi,1.0625rem)}
:is(.lh,.lab-task,.lab-project,.lab-finding) .lab-h3{font-size:clamp(.9rem,.625rem + 2cqi,1rem)}
:is(.lh,.lab-task,.lab-project,.lab-finding) .lab-t13{font-size:clamp(.75rem,.625rem + 1cqi,.8125rem)}
:is(.lh,.lab-task,.lab-project,.lab-finding) .lab-t14{font-size:.875rem}
:is(.lh,.lab-task,.lab-project,.lab-finding) .uos-prose{font-size:clamp(.875rem,.75rem + 1cqi,.9375rem)}
:is(.lh,.lab-task,.lab-project,.lab-finding) :is(.uos-btn-sm,.uos-chip){font-size:clamp(.75rem,.5625rem + 1.5cqi,.8125rem)}
:is(.lh,.lab-task,.lab-project,.lab-finding) .uos-feature h3{font-size:clamp(1rem,.74rem + 2.1cqi,1.125rem)}
:is(.lh,.lab-task,.lab-project,.lab-finding) .uos-stat strong{font-size:clamp(1.25rem,.75rem + 5cqi,1.5rem)}
:is(.lh,.lab-task,.lab-project,.lab-finding) .uos-coverage-item{font-size:clamp(.75rem,.6rem + 1.8cqi,.8125rem)}
.lab-project .lab-h1{font-size:clamp(1.25rem,.625rem + 4cqi,1.625rem);line-height:1.2}
.lab-finding .lab-h1{font-size:clamp(1.2rem,.75rem + 3cqi,1.5rem);line-height:1.2}
/* links inside notes (practice site, evidence URL, "Lab home") keep their place in the text but get a 29px tap height */
:is(.lh,.lab-task,.lab-project,.lab-finding) :is(.lab-url,.uos-kv dd) a{display:inline-block;padding:4px 0;margin:-4px 0;overflow-wrap:anywhere}
.lh .uos-kv dd{overflow-wrap:anywhere}
.lh .uos-kv button.uos-link{display:inline-flex;align-items:center;justify-content:center;min-width:28px;min-height:28px;margin:-4px 0;padding:0 5px;vertical-align:middle}
/* checkboxes: at least 24px on phones, 20px elsewhere */
.lh .uos-check input[type=checkbox]{width:20px;height:20px;margin-top:1px}
@media (max-width:639px){.lh .uos-check input[type=checkbox]{width:24px;height:24px;margin-top:0}}

/* ---------- 2. Virtual Lab hub (/lab) ---------- */
/* the short product names in the intro stay on one line (two or three words), so their boxes never span two lines */
.lh .uos-hero>p strong{white-space:nowrap}
/* the access badge next to the hero buttons wraps instead of running out of the screen */
.lh .uos-hero-actions .uos-badge{white-space:normal;height:auto;line-height:1.35;text-align:left;max-width:100%}
.lh .lh-tabs{container-type:inline-size}
.lh .lh-tabs button{font-size:clamp(.82rem,.66rem + .9cqi,.93rem);padding:0 clamp(10px,4px + 2cqi,14px)}
.lh .lh-tabs .lh-count{font-size:clamp(.72rem,.6rem + .6cqi,.78rem)}
.lh .lh-head{container-type:inline-size}
.lh .lh-head h2{font-size:clamp(1.15rem,.8rem + 2cqi,1.4rem)}
.lh .lh-stats dd{font-size:clamp(1.1rem,.95rem + .8cqi,1.25rem)}
.lh .lh-stats div{padding:clamp(6px,4px + .6cqi,8px) clamp(10px,8px + .6cqi,12px)}
.lh .lh-tools{container-type:inline-size}
.lh .lh-search input{font-size:clamp(.9rem,.82rem + .4cqi,.95rem)}
.lh .lh-chips button{font-size:clamp(.8rem,.69rem + .65cqi,.88rem);padding:0 clamp(10px,4px + 2cqi,13px)}
.lh .lh-cat{container-type:inline-size}
.lh .lh-cat-head h3{font-size:clamp(1rem,.79rem + 1.2cqi,1.15rem)}
.lh .lh-cat-head p{font-size:clamp(.875rem,.8rem + .3cqi,.9rem)}
.lh .lh-cat-head small{font-size:clamp(.76rem,.7rem + .4cqi,.82rem)}
/* reviewed tasks list: title and details wrap (no ellipsis), the state badge sits under them on narrow cards */
.lh .uos-list>li{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:8px 12px;align-items:center}
.lh .uos-list-main{min-width:0}
.lh .uos-list-main strong{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.35;overflow-wrap:anywhere}
.lh .uos-list-main small{display:block;margin-top:2px;line-height:1.4}
.lh .uos-list-main a{display:inline-block;padding:4px 0;margin:-4px 0}
@container (max-width:440px){
    .lh .uos-list>li{grid-template-columns:38px minmax(0,1fr)}
    .lh .uos-list>li>.uos-badge{grid-column:2;justify-self:start}
}
/* AI site audit form: the name and type fields stack when the form is narrow (the type select was cut off at 768px) */
.lh #ai-lab form.uos-form{container-type:inline-size}
@container (max-width:460px){.lh #ai-lab .uos-form .uos-grid-2{grid-template-columns:minmax(0,1fr)}}
.lh .uos-table td{font-size:clamp(.8125rem,.78rem + .2cqi,.875rem)}

/* ---------- 3. Lab workspace (/lab/practice/<slug>) ---------- */
.sbw .sbw-top{container-type:inline-size}
.sbw .sbw-back,.sbw .sbw-meta{font-size:clamp(.84rem,.78rem + .4cqi,.9rem)}
.sbw .uos-btn-sm{font-size:clamp(.75rem,.5625rem + 1.5cqi,.8125rem)}
.sbw .sbw-card{container-type:inline-size}
.sbw .sbw-card h2{font-size:clamp(.9rem,.6rem + 2.35cqi,1rem)}
.sbw .sbw-card h3{font-size:clamp(.875rem,.65rem + 1.8cqi,.95rem)}
.sbw .sbw-brief,.sbw .sbw-goals{font-size:clamp(.875rem,.65rem + 1.8cqi,.95rem)}
.sbw .sbw-muted{font-size:clamp(.8rem,.56rem + 1.9cqi,.88rem)}
.sbw .sbw-checks li{font-size:clamp(.875rem,.75rem + 1cqi,.92rem)}
.sbw .sbw-hints li{font-size:clamp(.875rem,.75rem + 1.1cqi,.93rem)}
.sbw .sbw-sources{font-size:clamp(.875rem,.75rem + .9cqi,.9rem)}
.sbw .sbw-rankline{font-size:clamp(.84rem,.74rem + .6cqi,.9rem)}
/* the position line flows as one sentence; the gap before the badge and the button sits on the trailing side, so a badge or button that wraps
   starts flush with the text above it (the same gaps as before when it all fits on one line) */
.sbw .sbw-rankline strong{margin-right:2px}
.sbw .sbw-rankline .sbw-mv,.sbw .sbw-rankline .sbw-link{margin-left:0;margin-right:2px}
.sbw .sbw-main{container-type:inline-size}
.sbw .sbw-tabs button{font-size:clamp(.84rem,.74rem + .8cqi,.92rem);padding:8px clamp(10px,6px + 1.5cqi,14px)}
.sbw .sbw-subtabs button{font-size:clamp(.8rem,.7rem + .8cqi,.88rem)}
.sbw .sbw-panel{padding:clamp(12px,9px + 1cqi,16px)}
.sbw .sbw-field label,.sbw .sbw-label,.sbw .sbw-addpage label{font-size:clamp(.78rem,.68rem + .8cqi,.86rem)}
.sbw .sbw-help,.sbw .sbw-meter small,.sbw .sbw-ai cite{font-size:clamp(.75rem,.68rem + .4cqi,.8rem)}
.sbw .sbw-set legend,.sbw .sbw-adv summary,.sbw .sbw-check,.sbw .sbw-sim-label,.sbw .sbw-rdesc,.sbw .sbw-sim-how summary,.sbw .sbw-unsaved p{font-size:clamp(.84rem,.74rem + .6cqi,.9rem)}
.sbw .sbw-count,.sbw .sbw-json,.sbw .sbw-sim-stats dt,.sbw .sbw-sim-metrics{font-size:clamp(.72rem,.66rem + .4cqi,.78rem)}
.sbw .sbw-link,.sbw .sbw-dirty,.sbw .sbw-meter-top,.sbw .sbw-arrow{font-size:clamp(.78rem,.7rem + .5cqi,.85rem)}
.sbw .sbw-host,.sbw .sbw-sim-slots,.sbw .sbw-sim-how ul{font-size:clamp(.8rem,.7rem + .8cqi,.88rem)}
.sbw .sbw-sim-moves li,.sbw .sbw-ai blockquote p{font-size:clamp(.875rem,.78rem + .5cqi,.92rem)}
.sbw .sbw-crumb,.sbw .sbw-pos{font-size:clamp(.75rem,.68rem + .5cqi,.82rem)}
.sbw .sbw-rich{font-size:clamp(.78rem,.7rem + .5cqi,.84rem)}
.sbw .sbw-sim-alert p{font-size:clamp(.875rem,.78rem + .5cqi,.92rem)}
/* live site address bar: host, field and buttons wrap on narrow panels instead of squeezing the field */
.sbw .sbw-addr{flex-wrap:wrap}
.sbw .sbw-addr input{flex:1 1 180px;width:auto;min-width:0}
.sbw .sbw-toast{max-width:calc(100vw - 32px);overflow-wrap:anywhere}

/* ---------- 4. Reviewed task page (/lab/task) ---------- */
.lab-task .lab-hero-badge{font-size:clamp(.75rem,.7rem + .4cqi,.8125rem);padding:6px clamp(9px,7px + 1cqi,12px);white-space:normal;height:auto;line-height:1.3}

/* ---------- 5. AI Lab project page (/lab/project) ---------- */
/* findings list: the URL and evidence excerpt wrap (two lines) instead of being cut with an ellipsis */
.lab-project .uos-finding-row strong{font-size:clamp(.9rem,.78rem + 1cqi,1rem)}
.lab-project .uos-finding-row small{white-space:normal;overflow:hidden;text-overflow:clip;max-width:none;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow-wrap:anywhere;line-height:1.4}
.lab-project .uos-list-main strong{white-space:normal;overflow:visible;text-overflow:clip}
.lab-project .uos-coverage-item strong{flex-wrap:wrap}
.lab-project .uos-evidence{overflow-wrap:anywhere}

/* ---------- 6. Old practice catalogue (/lab/practice, now redirected to /lab) ---------- */
.sbx-catalog .sbx-hero,.sbx-catalog .sbx-filters,.sbx-catalog .sbx-topic-head{container-type:inline-size}
.sbx-catalog .sbx-stats dd{font-size:clamp(1.25rem,1rem + 1.2cqi,1.6rem)}
.sbx-catalog .sbx-chips a{font-size:clamp(.84rem,.76rem + .5cqi,.92rem)}
.sbx-catalog .sbx-chips-sm a{font-size:clamp(.78rem,.7rem + .5cqi,.85rem)}
.sbx-catalog .sbx-topic-head h2{font-size:clamp(1.1rem,.9rem + 1cqi,1.35rem)}

/* ---------- 7. Practice hub (/practice) and free resources (/free-seo-resources): the hub views are shared, so the rules are keyed to these two pages ---------- */
.uhub:has(.uhub-card[href$="/lab"],.uhub-card[href$="/seo-ctf"],.rs-toc) .uhub-hero p{font-size:clamp(1rem,.97rem + .3vw,1.08rem)}
.uhub:has(.uhub-card[href$="/lab"],.uhub-card[href$="/seo-ctf"],.rs-toc) .uhub-h2{font-size:clamp(1.1rem,1rem + .4vw,1.25rem)}
.uhub:has(.uhub-card[href$="/lab"],.uhub-card[href$="/seo-ctf"]) .uhub-card{container-type:inline-size}
.uhub:has(.uhub-card[href$="/lab"],.uhub-card[href$="/seo-ctf"]) .uhub-card-body{padding:clamp(12px,4px + 5cqi,14px) clamp(12px,5px + 5cqi,16px) clamp(12px,5px + 5cqi,16px)}
.uhub:has(.uhub-card[href$="/lab"],.uhub-card[href$="/seo-ctf"]) .uhub-card-body strong{font-size:min(clamp(.92rem,.7rem + 2.35cqi,1.04rem),clamp(0.92rem,0.873rem + 0.209vw,1.04rem))}
.uhub:has(.uhub-card[href$="/lab"],.uhub-card[href$="/seo-ctf"]) .uhub-card-body small{font-size:min(clamp(.875rem,.62rem + 2.2cqi,.93rem),clamp(0.85rem,0.819rem + 0.139vw,0.93rem))}
.uhub:has(.uhub-card[href$="/lab"],.uhub-card[href$="/seo-ctf"]) .uhub-go,.uhub:has(.uhub-card[href$="/lab"],.uhub-card[href$="/seo-ctf"]) .uhub-lock{font-size:clamp(.82rem,.6rem + 2cqi,.9rem)}
.uhub .rs-toc{container-type:inline-size}
.uhub .rs-toc .uhub-chips a{font-size:clamp(.9rem,.82rem + .4cqi,1rem);padding:0 clamp(12px,8px + 1.5cqi,18px)}
/* resource cards: never wider than the page (the 300px minimum used to overflow 320px phones); the links get a 29px tap height */
.uhub .rs-list{grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr))}
.uhub .rs-list li{container-type:inline-size;padding:clamp(12px,8px + 1.5cqi,14px) clamp(12px,8px + 2cqi,16px)}
.uhub .rs-list>li>a{padding:4px 0;margin:-4px 0;line-height:1.5}
.uhub .rs-group>p.uos-muted a{display:inline-block;padding:4px 0;margin:-4px 0;line-height:1.5}
.uhub .rs-list a{font-size:clamp(.92rem,.69rem + 1.9cqi,1rem)}
.uhub .rs-list span{font-size:clamp(.875rem,.74rem + 1.1cqi,.92rem)}
.uhub .rs-list small{font-size:clamp(.72rem,.53rem + 1.5cqi,.78rem)}
.uhub .rs-group>p.uos-muted{font-size:clamp(.9rem,.86rem + .3vw,1rem)}
/* ---------- 8. v21 practice r1x: inline fixed sizes moved into classes; phone layouts that looked unfinished ---------- */
/* small print (credential note, score disclaimer, "Last checked"): the caption size, the same as before */
:is(.lh,.lab-project,.lab-finding) .lab-t12{font-size:var(--uos-fs-caption,.75rem)}
.lab-project .lab-verify-tag{font-size:.71875rem;overflow-wrap:anywhere}
/* reviewed tasks: the four counters are a 2 x 2 grid on phones (they were four full-width rows); in a narrow counter the label
   drops under the icon, and the icon follows the counter's width */
@media (max-width:640px){.lh .lab-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}
.lh .lab-stats .uos-stat{flex-wrap:wrap;gap:10px 14px}
.lh .lab-stats .uos-stat>div:not(.uos-stat-icon){flex:1 1 7.5rem;min-width:0}
.lh .lab-stats .uos-stat-icon{width:clamp(36px,20px + 12cqi,48px);height:clamp(36px,20px + 12cqi,48px);font-size:clamp(15px,6px + 5.6cqi,19px);border-radius:clamp(11px,4px + 4.6cqi,15px)}
.lh .lab-stats .uos-stat span{font-size:clamp(.72rem,.5rem + 2.5cqi,.75rem);line-height:1.3}
/* practice environment logins: label and value side by side, stacked when the card is narrow so a site address is not broken mid-word */
.lh .lab-env-kv{margin-top:10px;grid-template-columns:90px minmax(0,1fr)}
@container (max-width:340px){
    .lh .lab-env-kv{grid-template-columns:minmax(0,1fr);gap:2px 0}
    .lh .lab-env-kv dd{margin-bottom:8px}
    .lh .lab-env-kv dd:last-child{margin-bottom:0}
}
/* AI project header: score, details and the scan button; once the button has to wrap it sits on its own row with the
   "scans left" note beside it (it used to hang right-aligned under the button) */
.lab-project .lab-proj-head{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.lab-project .lab-proj-info{flex:1;min-width:min(240px,100%)}
.lab-project .lab-proj-actions{display:flex;flex-direction:column;gap:8px;align-items:flex-end}
@container (max-width:600px){.lab-project .lab-proj-actions{flex:1 1 100%;flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px 14px}}
/* "Submitting" and "Scanning" overlays: a side gutter on phones, the title follows the card width (the card gets a definite width,
   up to its 380px maximum, because a query container cannot size itself from its content) */
:is(#labSubmitOverlay,#labScanOverlay){padding:16px}
:is(#labSubmitOverlay,#labScanOverlay) .uos-overlay-card{width:100%;container-type:inline-size;padding:clamp(20px,14px + 2vw,26px) clamp(18px,12px + 2.4vw,28px);overflow-wrap:anywhere}
:is(#labSubmitOverlay,#labScanOverlay) .lab-ov-title{font-size:clamp(1rem,.8rem + 2cqi,1.125rem);margin:14px 0 6px}
:is(#labSubmitOverlay,#labScanOverlay) .lab-ov-text{margin:0;font-size:.875rem}
/* the legacy theme (responsive.css) sets every <strong> to weight 400 at 768px and below, so bold text (scores, counters, titles,
   lead-ins) lost its weight on phones only; restore the desktop weight on these pages (zero specificity, so component rules still win) */
:where(.lh,.lab-task,.lab-project,.lab-finding,.sbw,.sbx-catalog,.uhub.uos-resources,.uhub:has(.uhub-card[href$="/lab"],.uhub-card[href$="/seo-ctf"])) strong{font-weight:bolder}
/* ---------- 9. v21 ux-labs: back links, Site audit grouping and coverage line ---------- */
:is(.lab-task,.lab-project,.lab-finding) .lab-back{display:inline-flex;align-items:center;gap:6px;margin-bottom:12px;min-height:24px;font-size:clamp(.875rem,.84rem + .2vw,.95rem);overflow-wrap:anywhere}
:is(.lab-project,.lab-finding) .lab-mt10{margin-top:10px}
:is(.lab-project,.lab-finding) .lab-m0{margin:0}
.lab-project .lab-cov-details>summary{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;cursor:pointer;list-style:none}
.lab-project .lab-cov-details>summary::-webkit-details-marker{display:none}
.lab-project .lab-cov-line{flex:1 1 260px;display:flex;gap:8px;align-items:flex-start;min-width:0;color:var(--uos-ink);font-weight:600;font-size:clamp(.875rem,.7rem + 1.2cqi,1rem);line-height:1.45}
.lab-project .lab-cov-line i{margin-top:.25em;color:var(--uos-accent-text)}
.lab-project .lab-cov-toggle{display:inline-flex;align-items:center;gap:6px;min-height:24px;font-size:clamp(.8rem,.66rem + 1cqi,.875rem);font-weight:600;color:var(--uos-accent-text)}
.lab-project .lab-cov-toggle i{transition:transform .15s ease}
.lab-project .lab-cov-hide{display:none}
.lab-project .lab-cov-details[open] .lab-cov-show{display:none}
.lab-project .lab-cov-details[open] .lab-cov-hide{display:inline}
.lab-project .lab-cov-details[open] .lab-cov-toggle i{transform:rotate(180deg)}
.lab-project .lab-cov-details .uos-coverage{margin-top:14px}
.lab-project .lab-first{margin:0 0 12px;padding:clamp(10px,.4rem + 1.2cqi,14px) clamp(12px,.5rem + 1.4cqi,16px);border:1px solid rgba(var(--uos-accent-rgb),.4);border-radius:var(--uos-radius);background:rgba(var(--uos-accent-rgb),.06)}
.lab-project .lab-first h3{margin:0 0 6px}
.lab-project .lab-first ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:4px;font-size:clamp(.875rem,.72rem + 1.1cqi,.95rem);color:var(--uos-text);line-height:1.45}
.lab-project .lab-first li a{display:inline-block;padding:3px 0;font-weight:600;color:var(--uos-accent-text);overflow-wrap:anywhere}
.lab-project .lab-first .uos-badge{vertical-align:middle;margin-left:4px}
.lab-project .lab-issue{border-bottom:1px solid var(--uos-line);scroll-margin-top:calc(var(--uos-header-h,72px) + 16px)}
.lab-project .lab-issue:last-child{border-bottom:0}
.lab-project .lab-issue-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 0;cursor:pointer;list-style:none}
.lab-project .lab-issue-head::-webkit-details-marker{display:none}
.lab-project .lab-issue-head:hover{background:var(--uos-glass-hi)}
.lab-project .lab-issue-title{min-width:0}
.lab-project .lab-issue-title strong{display:block;color:var(--uos-ink);font-size:clamp(.9rem,.72rem + 1.3cqi,1rem);line-height:1.35;overflow-wrap:anywhere}
.lab-project .lab-issue-title small{display:block;color:var(--uos-muted);font-size:clamp(.78rem,.7rem + .6cqi,.85rem)}
.lab-project .lab-issue-chev{transition:transform .15s ease}
.lab-project .lab-issue[open] .lab-issue-chev{transform:rotate(180deg)}
.lab-project .lab-issue .uos-finding-row{padding-left:clamp(10px,.3rem + 2.4cqi,24px);border-bottom:0;border-top:1px dashed var(--uos-line)}
.lab-project .lab-issue .uos-finding-row strong{font-size:clamp(.84rem,.7rem + 1cqi,.92rem);font-weight:600;overflow-wrap:anywhere}
@container (max-width:460px){.lab-project .lab-issue-head{grid-template-columns:minmax(0,1fr) auto}.lab-project .lab-issue-head>.uos-badge{grid-column:1/-1;justify-self:start}}
/* ---------- 10. v21 fluid text pass (owner rule: every heading, title, button, label and paragraph follows the screen or its card;
   each max is today's desktop size). Card text that sat at the same size on a 360px phone and a 1280px desktop (the cards are
   about as wide on both) now also takes a small part of the viewport width, so it is a little smaller on phones. ---------- */
.lh .uos-hero>p,.lab-task .uos-hero>p,.lh .lh-head p{font-size:clamp(.9375rem,.875rem + .25vw,1rem)}
.lh .sbx-task strong{font-size:clamp(.94rem,.84rem + .4cqi + .2vw,1.03rem)}
.lh .sbx-task small{font-size:clamp(.84rem,.78rem + .3cqi + .12vw,.9rem)}
:is(.lh,.lab-task,.lab-project,.lab-finding) .uos-card-head :is(h2,h3),:is(.lh,.lab-task,.lab-project,.lab-finding) .lab-h2{font-size:clamp(.95rem,.78rem + .8cqi + .2vw,1.0625rem)}
:is(.lh,.lab-task,.lab-project,.lab-finding) .lab-h3{font-size:clamp(.9rem,.74rem + .8cqi + .2vw,1rem)}
:is(.lab-task,.lab-finding) .uos-prose p{font-size:clamp(.9375rem,.8rem + .5cqi + .2vw,1rem)}
.lab-task .uos-env strong,.lab-task aside .uos-card p strong{font-size:clamp(.9375rem,.8rem + .5cqi + .2vw,1rem)}
.lab-project .lab-proj-info p:not(.lab-t13),.lab-project .lab-proj-info p:not(.lab-t13) a{font-size:clamp(.875rem,.78rem + .4cqi + .2vw,1rem)}
.lab-finding .uos-card>p.uos-muted,.lab-finding .uos-card>p.uos-muted a{font-size:clamp(.875rem,.78rem + .4cqi + .2vw,1rem)}
.sbw .sbw-card h2{font-size:clamp(.9rem,.7rem + .9cqi + .25vw,1rem)}
.sbw .sbw-brief,.sbw .sbw-goals{font-size:clamp(.875rem,.7rem + .6cqi + .25vw,.95rem)}
.sbw .sbw-clue,.sbw .sbw-next{font-size:clamp(.84rem,.7rem + .5cqi + .2vw,.9rem)}
.lh .lh-rec-title{font-size:clamp(1.02rem,.82rem + 1cqi + .25vw,1.25rem)}
/* inputs and code editors stay at least 16px on phones (readable, and phones do not zoom the page when a field gets focus) */
@media (max-width:639.98px){.sbw .sbw-editor :is(input[type=text],textarea,select),.sbw .sbw-addr input,.sbw .sbw-q input,.sbw .sbw-addpage input,.lh .lh-search input,.lh .lh-catsel select,:is(.lh,.lab-task,.lab-project,.lab-finding) .uos-form :is(input:not([type=checkbox]):not([type=radio]):not([type=file]),textarea,select){font-size:16px}}
/* tap height for links whose text got a little smaller on phones (at least 24px) */
.lh .lh-head p a,.lab-project .lab-proj-info a.uos-url,.lab-finding .uos-card>p.uos-muted a{display:inline-block;padding:4px 0;margin:-4px 0}
.sbw .sbw-skip{min-height:24px;align-items:center}
@media (max-width:1100px){.sbw .sbw-skip{display:inline-flex}}
/* the sticky save bar sits on top of the editor by design: its items are positioned so they layer above the fields they pass over */
.sbw .sbw-savebar{z-index:2}
.sbw .sbw-savebar>*,.sbw .sbw-savebar>*>*{position:relative}
