/* cogo-teacher-guide-fill-r1: fit the guide to available viewport height, preserving all instructions. */
html body[data-view="guide19"] #main.content:has(.tg-design-r1){padding-top:16px!important;padding-bottom:14px!important}
html body[data-view="guide19"] #main.content>.page:has(.tg-design-r1){padding-top:0!important;padding-bottom:12px!important;min-height:0!important}
body[data-view="guide19"] #main .tg-design-r1{padding-bottom:0}
#main .tg-design-r1>.tg-hero{padding:16px 24px;margin-bottom:16px;border-radius:20px;gap:20px;min-height:0}
#main .tg-design-r1 .tg-eyebrow{font-size:10px;line-height:1.5;letter-spacing:.3px}
#main .tg-design-r1 .tg-hero h1{font-size:30px;line-height:1.25;letter-spacing:-1px;margin:7px 0 8px}
#main .tg-design-r1 .tg-hero p{font-size:12px;line-height:1.7}
#main .tg-design-r1 .tg-hero p br{display:block}
#main .tg-design-r1 .tg-hero-art{display:block;flex:0 0 225px;width:225px;height:96px;margin:0 5px 0 0;transform:none}
#main .tg-design-r1 .tg-art-front{left:8px;top:17px;transform:rotate(-6deg) scale(.62);transform-origin:top left;animation:none}
#main .tg-design-r1 .tg-art-back{left:110px;top:0;transform:rotate(8deg) scale(.62);transform-origin:top left}
#main .tg-design-r1 .tg-orbit{width:180px;height:180px;left:30px;top:-43px;opacity:.75}
#main .tg-design-r1 .tg-art-spark-one{left:-5px;top:4px;font-size:17px}
#main .tg-design-r1 .tg-art-spark-two{right:3px;bottom:0;font-size:20px}
#main .tg-design-r1 .tg-layout{grid-template-columns:220px minmax(0,1fr);gap:18px;align-items:stretch}
#main .tg-design-r1 .tg-nav{padding:10px 9px;gap:4px;border-radius:17px;justify-content:flex-start}
#main .tg-design-r1 .tg-nav-head{padding:4px 10px 10px;font-size:10px;line-height:1.4}
#main .tg-design-r1 .tg-nav-head b{font-size:9px;line-height:1.3;padding:2px 5px}
#main .tg-design-r1 .tg-nav button{min-height:48px;padding:7px 9px;gap:9px;border-radius:10px;flex:none}
#main .tg-design-r1 .tg-nav-icon{width:27px;height:28px;flex-basis:27px}
#main .tg-design-r1 .tg-nav-icon svg{width:20px;height:20px}
#main .tg-design-r1 .tg-nav-copy b{font-size:12px;line-height:1.4}
#main .tg-design-r1 .tg-nav-copy small{font-size:10px;line-height:1.4;margin-top:2px}
#main .tg-design-r1 .tg-content{display:flex;min-width:0}
#main .tg-design-r1 .tg-article{width:100%;display:flex;flex-direction:column;padding:20px 24px 0;border-radius:18px;min-width:0}
#main .tg-design-r1 .tg-article-head{gap:14px;padding-bottom:15px;margin-bottom:14px;flex:none}
#main .tg-design-r1 .tg-topic-icon{width:46px;height:46px;flex-basis:46px;border-radius:14px}
#main .tg-design-r1 .tg-topic-icon svg{width:24px;height:24px}
#main .tg-design-r1 .tg-kicker{font-size:9px;line-height:1.4;margin-bottom:4px}
#main .tg-design-r1 .tg-article h2{font-size:25px;line-height:1.25;letter-spacing:-.7px;margin:0 0 4px}
#main .tg-design-r1 .tg-topic-copy>p{font-size:12px;line-height:1.7}
#main .tg-design-r1 .tg-topic-position{display:flex;padding-top:3px;font-size:10px}
#main .tg-design-r1 .tg-topic-position b{font-size:20px}
#main .tg-design-r1 .tg-steps-label{margin-bottom:10px;flex:none}
#main .tg-design-r1 .tg-steps-label h3{font-size:11px;line-height:1.5}
#main .tg-design-r1 .tg-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:18px;flex:1}
#main .tg-design-r1 .tg-steps li{display:grid;grid-template-columns:27px minmax(0,1fr);column-gap:12px;row-gap:5px;align-content:start;padding:16px;min-height:98px}
#main .tg-design-r1 .tg-step-top{grid-row:1/3;align-self:start;margin:0;display:block}
#main .tg-design-r1 .tg-step-rule{display:none}
#main .tg-design-r1 .tg-step-number{width:26px;height:26px;font-size:10px}
#main .tg-design-r1 .tg-steps h4{margin:0;font-size:14px;line-height:1.5;letter-spacing:-.2px}
#main .tg-design-r1 .tg-steps p{font-size:12.5px;line-height:1.75;color:var(--tg-muted)}
#main .tg-design-r1 .tg-action-bar{margin:0 -24px;padding:12px 24px;gap:16px;flex-direction:row;align-items:center;flex:none}
#main .tg-design-r1 .tg-action-symbol{display:grid;width:28px;height:28px}
#main .tg-design-r1 .tg-action-bar p{font-size:10px;line-height:1.6}
#main .tg-design-r1 .tg-action-bar strong{font-size:11px}
#main .tg-design-r1 .tg-open{min-height:42px;padding:7px 9px 7px 15px;font-size:12px;gap:15px;justify-content:space-between}
#main .tg-design-r1 .tg-open>span{width:26px;height:26px}
@media(min-width:1101px){
 #main .tg-design-r1 .tg-steps:has(>li:nth-child(5)):not(:has(>li:nth-child(6)))>li:last-child{grid-column:1/-1;grid-template-columns:27px 130px minmax(0,1fr);align-items:center;column-gap:12px;min-height:0;padding-top:12px;padding-bottom:12px}
 #main .tg-design-r1 .tg-steps:has(>li:nth-child(5)):not(:has(>li:nth-child(6)))>li:last-child .tg-step-top{grid-row:auto;align-self:center}
}
@media(min-width:1101px) and (max-height:900px){
 html body[data-view="guide19"] #main.content:has(.tg-design-r1){padding-top:12px!important;padding-bottom:10px!important}
 html body[data-view="guide19"] #main.content>.page:has(.tg-design-r1){padding-bottom:8px!important}
 #main .tg-design-r1>.tg-hero{padding:12px 20px;margin-bottom:12px}
 #main .tg-design-r1 .tg-eyebrow,#main .tg-design-r1 .tg-hero-art{display:none}
 #main .tg-design-r1 .tg-hero h1{font-size:26px;margin:0 0 6px}
 #main .tg-design-r1 .tg-hero p{font-size:11.5px}
 #main .tg-design-r1 .tg-layout{grid-template-columns:200px minmax(0,1fr);gap:14px}
 #main .tg-design-r1 .tg-nav{padding:8px;gap:3px}
 #main .tg-design-r1 .tg-nav-head{padding:3px 8px 8px}
 #main .tg-design-r1 .tg-nav button{min-height:40px;padding:7px 8px}
 #main .tg-design-r1 .tg-nav-copy small{display:none}
 #main .tg-design-r1 .tg-article{padding:15px 19px 0}
 #main .tg-design-r1 .tg-article-head{padding-bottom:11px;margin-bottom:10px}
 #main .tg-design-r1 .tg-kicker{display:none}
 #main .tg-design-r1 .tg-article h2{font-size:23px}
 #main .tg-design-r1 .tg-steps-label{margin-bottom:8px}
 #main .tg-design-r1 .tg-steps{gap:10px;margin-bottom:12px}
 #main .tg-design-r1 .tg-steps li{padding:13px 14px;column-gap:10px;row-gap:4px;min-height:92px}
 #main .tg-design-r1 .tg-steps h4{font-size:13px}
 #main .tg-design-r1 .tg-steps p{font-size:12px;line-height:1.65}
 #main .tg-design-r1 .tg-action-bar{padding:10px 19px;margin-inline:-19px}
}
@media(max-width:1100px){
 #main .tg-design-r1 .tg-hero-art{display:none}
 #main .tg-design-r1 .tg-layout{grid-template-columns:190px minmax(0,1fr);gap:14px}
 #main .tg-design-r1 .tg-nav button{padding-inline:7px;gap:7px}
 #main .tg-design-r1 .tg-article{padding:18px 20px 0}
 #main .tg-design-r1 .tg-steps{grid-template-columns:1fr;gap:10px}
 #main .tg-design-r1 .tg-steps li{min-height:0;padding:13px 14px}
 #main .tg-design-r1 .tg-action-bar{margin-inline:-20px;padding:12px 20px;flex-direction:column;align-items:stretch;gap:10px}
 #main .tg-design-r1 .tg-action-symbol{display:none}
 #main .tg-design-r1 .tg-action-bar p br{display:none}
 #main .tg-design-r1 .tg-action-bar strong{display:block}
 #main .tg-design-r1 .tg-topic-position{display:none}
}
@media(max-width:760px){
 html body[data-view="guide19"] #main.content:has(.tg-design-r1){padding-top:12px!important}
 #main .tg-design-r1>.tg-hero{padding:18px 20px;margin-bottom:13px;border-radius:17px}
 #main .tg-design-r1 .tg-hero h1{font-size:25px;margin:7px 0;letter-spacing:-.8px}
 #main .tg-design-r1 .tg-hero p{font-size:11.5px;line-height:1.8}
 #main .tg-design-r1 .tg-hero h1 span{display:block}
 #main .tg-design-r1 .tg-layout{grid-template-columns:1fr;gap:13px}
 #main .tg-design-r1 .tg-nav{grid-template-columns:repeat(2,minmax(0,1fr));display:grid;gap:4px;padding:9px;border-radius:15px}
 #main .tg-design-r1 .tg-nav-head{padding:2px 7px 6px}
 #main .tg-design-r1 .tg-nav button{min-height:42px;padding:8px;gap:7px}
 #main .tg-design-r1 .tg-nav-copy b{font-size:11px}
 #main .tg-design-r1 .tg-nav-copy small{display:none}
 #main .tg-design-r1 .tg-nav-icon{width:23px;height:23px;flex-basis:23px}
 #main .tg-design-r1 .tg-nav-icon svg{width:18px;height:18px}
 #main .tg-design-r1 .tg-article{padding:18px 18px 0;border-radius:16px}
 #main .tg-design-r1 .tg-topic-icon{width:40px;height:40px;flex-basis:40px;border-radius:12px}
 #main .tg-design-r1 .tg-topic-icon svg{width:22px;height:22px}
 #main .tg-design-r1 .tg-article h2{font-size:23px}
 #main .tg-design-r1 .tg-topic-copy>p{font-size:11px}
 #main .tg-design-r1 .tg-steps{margin-bottom:14px}
 #main .tg-design-r1 .tg-steps li{column-gap:10px;padding:13px 12px}
 #main .tg-design-r1 .tg-steps p{font-size:12px;line-height:1.75}
 #main .tg-design-r1 .tg-action-bar{margin-inline:-18px;padding:12px 18px}
}

@media(min-width:1101px) and (max-height:720px){
 #main .tg-design-r1>.tg-hero{display:none}
 html body[data-view="guide19"] #main.content:has(.tg-design-r1) #cogo-business-legal-r1{padding-top:10px!important;padding-bottom:10px!important}
}
/* Group instructions are updated independently; their original prose carries the current action. */
#main .tg-design-r1 .tg-article:has(.tg-open[data-teacher298="groups"]) .tg-steps h4{display:none}
#main .tg-design-r1 .tg-article:has(.tg-open[data-teacher298="groups"]) .tg-steps li{align-content:center}
#main .tg-design-r1 .tg-article:has(.tg-open[data-teacher298="groups"]) .tg-step-top{grid-row:auto}
#main .tg-design-r1 .tg-article:has(.tg-open[data-teacher298="groups"]) .tg-steps p{font-size:13px;line-height:1.85;color:var(--tg-ink)}
@media(max-width:760px){#main .tg-design-r1 .tg-article:has(.tg-open[data-teacher298="groups"]) .tg-steps p{font-size:12px;line-height:1.8}}

/* Grow the guide into the usable viewport instead of leaving a footer-sized gap. */
@media(min-width:1101px){
 html body[data-view="guide19"] #main.content>.page:has(.tg-design-r1){display:flex!important;flex-direction:column!important;flex:1 0 auto!important;min-height:auto!important;padding-bottom:12px!important}
 #main .tg-design-r1{display:flex;flex-direction:column;flex:1 0 auto}
 #main .tg-design-r1>.tg-hero{flex:none}
 #main .tg-design-r1>.tg-layout{flex:1 0 auto}
 #main .tg-design-r1 .tg-nav button{flex:1 0 auto}
 #main .tg-design-r1 .tg-steps li{align-content:center}
 #main .tg-design-r1 .tg-steps:has(>li:nth-child(5)):not(:has(>li:nth-child(6))){grid-template-rows:1fr 1fr auto}
}

@media(min-width:1500px) and (min-height:901px){
 #main .tg-design-r1 .tg-nav-copy b{font-size:13px}
 #main .tg-design-r1 .tg-nav-copy small{font-size:11px}
 #main .tg-design-r1 .tg-steps h4{font-size:16px}
 #main .tg-design-r1 .tg-steps p{font-size:14px;line-height:1.8}
 #main .tg-design-r1 .tg-article:has(.tg-open[data-teacher298="groups"]) .tg-steps p{font-size:14.5px;line-height:1.9}
 #main .tg-design-r1 .tg-open{font-size:13px}
}