/* Viewport layout contract: panels own overflow; important actions remain reachable. */
main,.page,.design-grid,.review-grid,.review-content{min-width:0;min-height:0}
.page-head>div{min-width:0}.top nav{min-width:0}.area-panel{overflow:auto}
.draft-summary{flex-shrink:0}.draft-summary #draft-details{flex:1}
.review-content>*{flex-shrink:0}.review-content .actions{position:sticky;bottom:0;background:var(--bg);padding:8px 0 0;z-index:2}
.final-grid .effect{flex:none;min-height:0;overflow:visible}#final-copy{overflow:visible}
.final-config{overflow:visible}.face-stage svg{min-width:0;min-height:0}
#broad-notice{border-top:1px solid #d8e4ec;padding-top:6px;flex:none}
#broad-notice p{font-size:11px;line-height:1.4;margin:0}
#broad-notice>div{display:flex;flex-wrap:wrap;gap:4px}#broad-notice button{white-space:normal;font-size:11px;padding:5px 0;text-align:left}
#broad-notice button:first-child{font-weight:700;margin-right:12px}
.design-mobile-tabs{display:none}
html[lang=en] .area-chip{overflow-wrap:normal;font-size:11px}
.compare-dialog{width:900px}.compare-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.compare-card{border:1px solid var(--line);border-radius:12px;padding:12px;min-width:0}.compare-card h4{font-size:12px;margin:14px 0 4px}.compare-card p{font-size:12px;overflow-wrap:anywhere}.compare-card>strong{display:block;font-size:11px;margin-top:8px}
.compare-face{height:210px}.compare-face svg{width:100%;height:100%}.compare-names{min-height:36px;color:var(--navy)}
.compare-dialog .dialog-actions{position:sticky;bottom:-26px;background:#fff;padding:12px 0;margin-top:12px}
@media(min-width:1101px){.design-grid{grid-template-columns:minmax(220px,20%) minmax(0,1fr) minmax(300px,28%)}.cart{overflow:hidden}.draft-summary{max-height:58%}.area-chip{min-height:34px}.cart #plans{min-height:40px}.cart-action{margin-top:0}}
@media(min-width:701px) and (max-width:1100px) and (min-height:701px){
 .design-grid{grid-template-columns:245px minmax(0,1fr);grid-template-rows:minmax(0,1fr) minmax(265px,34%)}
 .cart{grid-column:1/-1;grid-row:2;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:22px minmax(0,1fr) 76px;gap:8px;padding:12px;overflow:hidden}
 .cart>.panel-title{grid-column:1;grid-row:1}.cart>.draft-summary{grid-column:1;grid-row:2/4;display:flex;max-height:none;overflow:hidden}
 .cart .saved-heading{grid-column:2;grid-row:1}.cart #plans{grid-column:2;grid-row:2;align-self:stretch}.cart .cart-action{grid-column:2;grid-row:3;display:grid;grid-template-rows:1fr 1fr;margin:0;gap:6px}
 .cart .cart-action .btn{min-height:34px;height:auto}.area-panel{gap:10px;padding:12px}.area-chip{min-height:34px}
}
@media(min-width:701px) and (max-height:700px), (min-width:900px) and (max-width:1100px) and (max-height:820px){
 .top{height:58px;gap:10px}.brand strong{font-size:14px}.brand small{display:none}.top nav{gap:12px}.top nav button{font-size:10px}
 main{padding:10px 14px}.page{gap:8px}.page-head h1{font-size:19px}.page-head .eyebrow{display:none}
 .design-grid{grid-template-columns:minmax(180px,23%) minmax(0,1fr) minmax(250px,32%);grid-template-rows:minmax(0,1fr);gap:8px}
 .area-panel{padding:10px;gap:10px}.area-chip{font-size:10px;min-height:32px}.area-panel .selection-line{display:none}
 .cart{grid-column:3;grid-row:1;display:flex;overflow:auto;padding:9px;gap:8px}.cart>.draft-summary{display:flex!important;max-height:none;min-height:150px;padding:8px;flex-shrink:0}.cart #draft-details{max-height:70px}.cart #plans{min-height:80px;flex:1}.cart .cart-action{display:grid;grid-template-rows:auto auto;gap:5px;margin:0;flex-shrink:0}.cart .cart-action .btn{min-height:32px}
 .review-grid{grid-template-columns:32% minmax(0,1fr)}.review-content{overflow:auto}
}
@media(max-width:700px){
 .top{height:88px;min-height:88px}.top nav button{white-space:normal;font-size:10px;line-height:1.3;padding:7px 4px}
 main{padding:8px 10px max(8px,env(safe-area-inset-bottom))}.page{gap:7px}.page-head{min-height:30px}
 #design .page-head h1,html[lang=en] #design .page-head h1{font-size:13px}.page-head h1,html[lang=en] .page-head h1{font-size:16px}
 .design-mobile-tabs{display:flex;gap:6px;flex:none}.design-mobile-tabs button{flex:1;border:1px solid var(--line);border-radius:8px;background:white;min-height:36px;font-size:12px;padding:6px}
 .design-mobile-tabs button[aria-pressed=true]{background:#eaf2f8;border-color:#8baec7;color:var(--navy);font-weight:700}
 #design .design-grid,html[lang=en] #design .design-grid,html[lang=ja] #design .design-grid{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(120px,1fr) minmax(210px,1fr);gap:7px}
 #design[data-pane=plans] .design-grid{grid-template-rows:minmax(100px,.7fr) minmax(275px,1.3fr)}
 #design[data-pane=areas] .cart,#design[data-pane=plans] .area-panel{display:none}
 .face-panel{grid-column:1;grid-row:1;padding:8px}.area-panel{grid-column:1;grid-row:2;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:30px minmax(0,1fr);gap:6px;padding:9px;overflow:hidden}
 .area-group{overflow:auto}.area-grid{height:auto;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(4,minmax(34px,1fr));gap:5px}
 .area-chip,html[lang=en] .area-chip,html[lang=ja] .area-chip{min-height:34px;font-size:10px;line-height:1.25;padding:5px 4px}
 .broad-group .area-grid{height:100%;grid-template-rows:repeat(2,minmax(42px,1fr))}.area-tabs button{font-size:11px;padding:5px}
 .cart{grid-column:1;grid-row:2;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:18px minmax(110px,1fr) 20px minmax(56px,.6fr) 73px;gap:5px;padding:9px;overflow:auto}
 .cart>.panel-title{grid-column:1;grid-row:1}.cart>.draft-summary,html[lang=en] .cart>.draft-summary{grid-column:1;grid-row:2;display:flex;max-height:none;gap:5px;min-height:0;padding:8px;overflow:auto}
 .draft-heading{flex:none}.draft-heading strong{font-size:12px}.draft-summary #draft-details{flex:none;max-height:65px;overflow:auto}.draft-row{display:flex}.draft-summary p,.draft-row p{font-size:11px}
 .draft-summary>.btn{min-height:34px;flex:none;align-self:stretch;font-size:11px}#broad-notice p{font-size:10px}
 .cart .saved-heading{grid-column:1;grid-row:3}.cart #plans{grid-column:1;grid-row:4;gap:5px}.plan-open strong{font-size:11px}.plan-open small{font-size:9px}
 .cart .cart-action{grid-column:1;grid-row:5;display:grid;grid-template-rows:34px 34px;gap:5px}.cart .cart-action .btn,.cart .cart-action #new-plan{font-size:11px;min-height:34px;height:auto}
 .review-grid,.final-grid{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(105px,.75fr) minmax(0,1.25fr);gap:8px}
 .review-content{overflow:auto;min-height:0;padding-bottom:0}.review-content>.mobile-tabs{position:sticky;top:0;background:var(--bg);z-index:3;padding-bottom:4px}.review-content>.actions{bottom:0;flex:none;min-height:46px}
 .final-grid .effect{min-height:0;flex:none}.final-grid .final-title{padding:10px}.final-title h2{font-size:18px}.final-title p{font-size:12px}.review-content>.panel{padding:12px}
 #final[data-detail=effects] .final-title{display:none}.final-config dl>div{padding:5px 0}
 .compare-dialog{padding:16px}.compare-grid{gap:8px}.compare-card{padding:8px}.compare-face{height:150px}.compare-card h3{font-size:12px}.compare-card p{font-size:11px}.compare-dialog .dialog-actions{bottom:-16px}.compare-dialog .dialog-actions button{flex:1;min-height:40px}
 .hero{overflow:auto}.hero-copy{min-width:0}.hero .triptych{position:static;width:100%;height:65px;margin-top:10px}.hero .btn{max-width:100%}.hero-visual{min-height:130px}
}
@media(max-width:700px) and (max-height:650px){#design .design-grid,html[lang=en] #design .design-grid,html[lang=ja] #design .design-grid{grid-template-rows:minmax(85px,.65fr) minmax(205px,1fr)}#design[data-pane=plans] .design-grid{grid-template-rows:minmax(65px,.35fr) minmax(275px,1.65fr)}.page-head{min-height:27px}.design-mobile-tabs button{min-height:32px}}
@media(max-width:700px) and (max-height:520px){main{overflow:auto}.page{min-height:390px;height:auto}.hero{min-height:390px}.design-grid{min-height:330px}.review-grid{min-height:330px}}
#mobile-broad{display:none}@media(max-width:700px){#design[data-pane=areas] #mobile-broad:not([hidden]){display:block;flex:none;padding:2px;font-size:11px;text-align:left}#design[data-pane=plans] .design-grid{grid-template-rows:120px minmax(275px,1fr)}}

/* Nine-language menu and longer Southeast Asian copy. */
.language-options{width:210px;max-width:calc(100vw - 24px);max-height:min(70dvh,460px);overflow-y:auto;overscroll-behavior:contain}
.language-picker summary #language-name{max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html:lang(th) body{font-family:Tahoma,'Leelawadee UI','Noto Sans Thai',sans-serif}
html:is([lang=vi],[lang=th],[lang=id],[lang=ms],[lang=fil]) .area-chip{overflow-wrap:normal;line-height:1.45;text-align:left;min-height:40px}
html:is([lang=vi],[lang=th],[lang=id],[lang=ms],[lang=fil]) .top nav{gap:14px}
html:is([lang=vi],[lang=th],[lang=id],[lang=ms],[lang=fil]) .top nav button{white-space:normal;max-width:135px;line-height:1.4}
html:is([lang=vi],[lang=th],[lang=id],[lang=ms],[lang=fil]) .draft-row b{white-space:normal}
html:is([lang=vi],[lang=th],[lang=id],[lang=ms],[lang=fil]) .design-row{grid-template-columns:110px minmax(0,1fr)}
html:is([lang=vi],[lang=th],[lang=id],[lang=ms],[lang=fil]) .page-head h1{font-size:clamp(18px,1.8vw,29px)}
@media(max-width:1100px) and (min-width:701px){html:is([lang=vi],[lang=th],[lang=id],[lang=ms],[lang=fil]) .brand small{display:none}html:is([lang=vi],[lang=th],[lang=id],[lang=ms],[lang=fil]) .top nav{gap:8px}}
@media(max-width:700px){
 .language-picker summary #language-name{max-width:82px}.language-picker{max-width:155px}
 html:is([lang=vi],[lang=th],[lang=id],[lang=ms],[lang=fil]) .top nav{gap:4px}
 html:is([lang=vi],[lang=th],[lang=id],[lang=ms],[lang=fil]) .top nav button{font-size:9px;flex:1;padding:4px 2px;max-width:none}
 html:is([lang=vi],[lang=th],[lang=id],[lang=ms],[lang=fil]) .page-head h1{font-size:14px}
 html:is([lang=vi],[lang=th],[lang=id],[lang=ms],[lang=fil]) #design .page-head h1{font-size:12px}
 html:is([lang=vi],[lang=th],[lang=id],[lang=ms],[lang=fil]) #reset.reset-action{white-space:normal;max-width:105px;line-height:1.3}
 html:is([lang=vi],[lang=th],[lang=id],[lang=ms],[lang=fil]) .area-grid{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:none;grid-auto-rows:minmax(40px,auto)}
 html:is([lang=vi],[lang=th],[lang=id],[lang=ms],[lang=fil]) .broad-group .area-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(50px,1fr))}
 html:is([lang=vi],[lang=th],[lang=id],[lang=ms],[lang=fil]) .area-chip{font-size:10px}
 html:is([lang=vi],[lang=th],[lang=id],[lang=ms],[lang=fil]) .area-panel{grid-template-columns:minmax(0,1fr) auto}
 html:is([lang=vi],[lang=th],[lang=id],[lang=ms],[lang=fil]) .area-panel>.panel-title{font-size:10px;line-height:1.3}
 html:is([lang=vi],[lang=th],[lang=id],[lang=ms],[lang=fil]) .area-tabs button{font-size:9px}
 html:is([lang=vi],[lang=th],[lang=id],[lang=ms],[lang=fil]) .design-mobile-tabs button{font-size:11px;line-height:1.4}
 html:is([lang=vi],[lang=th],[lang=id],[lang=ms],[lang=fil]) .draft-row{display:block}.draft-row p{overflow-wrap:anywhere}
 html:is([lang=vi],[lang=th],[lang=id],[lang=ms],[lang=fil]) .design-row{grid-template-columns:90px minmax(0,1fr)}
 html:is([lang=vi],[lang=th],[lang=id],[lang=ms],[lang=fil]) .actions .btn{white-space:normal;height:auto;line-height:1.4}
 html:is([lang=vi],[lang=th],[lang=id],[lang=ms],[lang=fil]) .hero h1{font-size:26px;letter-spacing:0}
 html:is([lang=vi],[lang=th],[lang=id],[lang=ms],[lang=fil]) #final .page-head{align-items:start}.page-head .pill{max-width:42%;white-space:normal}
}



/* Visible language choices before starting face design; shares the header preference. */
#start{overflow-y:auto}
.start-languages{margin:0 0 20px;max-width:510px}
.start-language-label{font-size:12px;font-weight:700;margin-bottom:8px;color:var(--muted)}
:is(#start-language-options,#intro-language-options){display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
:is(#start-language-options,#intro-language-options) button{display:flex;align-items:center;gap:7px;min-height:36px;padding:7px 9px;border:1px solid var(--line);border-radius:8px;background:#fff;text-align:left;font-size:11px}
:is(#start-language-options,#intro-language-options) button[aria-pressed=true]{background:#eaf2f8;border-color:#84a6bf;color:var(--navy)}
:is(#start-language-options,#intro-language-options) .language-check{margin-left:auto;visibility:hidden}
:is(#start-language-options,#intro-language-options) button[aria-pressed=true] .language-check{visibility:visible}
:is(#start-language-options,#intro-language-options) button:hover{border-color:#84a6bf}
:is(#start-language-options,#intro-language-options) .language-flag{flex:none;width:22px;height:15px;object-fit:contain}
@media(max-width:700px){.start-languages{margin-bottom:14px}:is(#start-language-options,#intro-language-options) button{font-size:10px;padding:6px;gap:5px}:is(#start-language-options,#intro-language-options) .language-check{display:none}.hero-copy{padding-bottom:12px}}

.share-actions{display:flex;flex-wrap:wrap;gap:6px;flex:none;margin-top:10px}.share-actions .btn{flex:1;padding:8px 10px;font-size:11px;min-height:36px;white-space:nowrap}.share-text{width:100%;height:45vh;margin-top:15px;font:inherit;line-height:1.6;padding:12px}@media(max-width:700px){.share-actions{display:grid;grid-template-columns:1fr 1fr;margin:8px 0}.share-actions .btn{font-size:11px}}
/* Prominent region categories on every device. */
#design .area-group h3{font-size:15px;font-weight:700;line-height:1.4;color:#244d70;background:#edf3f8;border-left:0;border-radius:5px;padding:7px 10px;margin:0 0 9px}
#design .broad-group h3{color:#765176;background:#f5eef6}
#design .area-tabs button{font-size:14px;font-weight:700;line-height:1.35;min-height:44px;padding:8px 12px;color:#38556d;border:1px solid #b8c9d6;border-radius:8px;background:#fff;white-space:normal;overflow-wrap:anywhere}
#design .area-tabs button[aria-pressed=true]{background:#244d70;color:#fff;border-color:#244d70;box-shadow:0 2px 6px #244d7020}
#design .area-tabs button[data-category=broad][aria-pressed=true]{background:#765176;border-color:#765176}
@media(max-width:700px){
 #design .area-panel{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr);gap:8px}
 #design .area-panel>.panel-title{grid-column:1;grid-row:1;font-size:14px}
 #design .area-tabs{grid-column:1;grid-row:2;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 #design .area-group{grid-column:1;grid-row:3}
 #design .area-group h3{display:none}
}
@media(min-width:701px) and (max-height:700px){#design .area-group h3{padding:4px 8px;margin-bottom:6px;font-size:14px}}